Flowbite plugin not working in RouterView

Question

I am currently building a dashboard app and I am facing an issue I can´t solve.

App.vue

<template>
  <div class="flex flex-row min-h-screen w-screen">
    <SideBar />

    <div class="flex flex-col w-full bg-gray-300 shrink min-w-0">
      <TopBar />

      <RouterView />
    </div>
  </div>
</template>

Dropdown fragment in TopBar component (flowbite acts normal):

<button
          type="button"
          class="flex mr-3 text-sm md:mr-0 items-center"
          id="user-menu-button"
          aria-expanded="false"
          data-dropdown-toggle="user-menu"
        >
          <span class="sr-only">Open user menu</span>
          <img
            class="w-8 h-8 rounded-full border-green"
            src="https://picsum.photos/200"
            alt="user photo"
          />
          <span class="ml-3 text-medium text-gray-500"
            >Hallo, <span class="font-semibold">Leon!</span></span
          >
        </button>

        <!-- Dropdown menu -->
        <div
          class="
            hidden
            z-50
            my-4
            text-base
            list-none
            bg-white
            rounded
            divide-y divide-gray-100
            shadow
            dark:bg-gray-700 dark:divide-gray-600
          "
          id="user-menu"
          style="
            position: absolute;
            inset: auto auto 0px 0px;
            margin: 0px;
            transform: translate(1246px, 723px);
          "
          data-popper-reference-hidden=""
          data-popper-escaped=""
          data-popper-placement="top"
        >

Start of at the RouterView injected Component:

<template>
  <main class="w-full h-full py-5 px-5">
    <CardStatus />

    <Card class="max-w-3xl max-h-80 p-5">
      <div class="mb-4 flex flex-row justify-between">
        <h5
          class="
            text-xl
            font-semibold
            tracking-tight
            text-gray-900
            dark:text-white
          "
        >

Dropdown fragment in CardStatus component (flowbite not working):

<button
        id="dropdownDefault"
        data-dropdown-toggle="dropdown"
        class="
          text-white
          bg-blue-700
          hover:bg-blue-800
          focus:ring-4 focus:outline-none focus:ring-blue-300
          font-medium
          rounded-lg
          text-sm
          px-4
          py-2.5
          text-center
          inline-flex
          items-center
          dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
        "
        type="button"
      >
        Dropdown button
        <svg
          class="w-4 h-4 ml-2"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          ></path>
        </svg>
      </button>
      <!-- Dropdown menu -->
      <div
        id="dropdown"
        class="
          z-10
          hidden
          bg-white
          divide-y divide-gray-100
          rounded
          shadow
          w-44
          dark:bg-gray-700
        "
      >
        <ul
          class="py-1 text-sm text-gray-700 dark:text-gray-200"
          aria-labelledby="dropdownDefault"
        >

I have no idea why it acts like this. I imported and installed everything like explained in the documentation.

Thanks