Expected behavior Navbar or any other modules/components to work within Laravel + InertiaJs (Vue)

Actual behavior I am using a fresh Laravel 8 Jetstream on Inertia mode (VueJs templates) and I want to integrate MDB by importing only necessary modules. In order to do this, I am just importing a single module that should work out of the box.

Resources (screenshots, code snippets etc.)

AppLayout.vue

<template>
      <header>
          <!-- Animated navbar-->
          <nav class="navbar navbar-expand-lg fixed-top navbar-scroll">
              ...
          </nav>
    </header>
    ...
</template>
<script>
    ...
    import { Navbar } from 'mdb/mdb.pro';
</script>

The compilation is successfull.

Basically, this module looks for an element with class '.navbar-scroll' which exists in my AppLayout.vue template as can be seen, but looks like the element is not found by Navbar module to execute the animation on scroll.

Just for test, I tried to dump inside the 'navbar.js' file that is responsible for doing this, to check if the element/class exists right before trying to execute it's code, but it returns undefined:

mdb/pro/navbar.js line 70

...
let nav = document.querySelector('.navbar-scroll');
console.log(nav); // returns undefined
SelectorEngine.find(`.${CLASSNAME_WRAPPER}`).forEach((element) => {
  console.log(element); // since there is no found element, this code is not executed
  new Navbar(element).init();
});

That means the template DOM is rendered after the module (Navbar) execution so of course the module won't find my '.navbar-scroll' element/class. Or in other words, the Navbar module gets executed too early ?

So how can I deal with this ? Most probably this issue may be available for other scenarios as well, since I'm trying to use some elements from the DOM, but it's not rendered yet.