Getting MDBootstrap PRO working with VueJs 3

Expected behavior

Step 1: Create a new VueJs project with

npm create vue@latest

Step 2: cd to Project folder and run

npm install

Step 3: Run

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced

to install mdbootstrap pro to the Project

Step 4: Add the following two lines to your main.js

import 'mdb-ui-kit/css/mdb.min.css';

import 'mdb-ui-kit/js/mdb.es.min.js';

Step 5: Add a Pro component to your App.vue

<div class="alert alert-dismissible fade show" role="alert" data-mdb-alert-init data-mdb-color="warning">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-mdb-dismiss="alert" aria-label="Close"></button>
</div>

Actual behavior

The Components are not rendered correctly, it seems like there is CSS or JS missing inside the components, if i add the alert to the index.html it will render without any problems. But as soon as i add the alert to the App.vue it will break and seem like the Javascript is not executed since i cant clode the alert or neither does it have a background. I hope someone can help me fixing this issue.I made this working like 3 years ago, i not sure what VueJs version i was using back then, but i think it was version 2, the code is lost to time :(

Resources (screenshots, code snippets etc.)