External JavaScript isn't loading on my vue3 layout

I am trying to move WordPress webpage to Laravel 12.x. I am using for that vue3 + inertia starting kit. But since I have very little experience with vue, and completely non in inertia, I bumped at some, I think, basic problem. I want to use front made with Bootstrap 5 (already made for previous version of site), and back-end with AdminLTE (which is using Bootstrap 4). Because of that I need to use different javascripts for front layout, and different for back-end layout. I succesed in creating front layout, but for some reason my admin panel layout don't work how it supposed to (clicking on menu parent item don't open list with child elements). I were able to check that it is something related to JavaScript (99% jQuery) that isn't loading like I expect him to. I downloaded AdminLTE by NPM package, that contains necessary plugins too. My AdminLayout.vue looks like that:

<script setup lang="ts">
  import 'admin-lte/plugins/jquery/jquery.min.js';
  import 'admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js';
  import 'admin-lte/dist/js/adminlte.js';

  import Navbar from '../../components/Szczecinska/Backend/LayoutElements/Navbar.vue';
  import Sidebar from '../../components/Szczecinska/Backend/LayoutElements/Sidebar.vue';

  defineProps([
    'breadcrumbs',
    'activeBreadcrump',
    'pageTitle'
  ]);
</script>
<template>
    <div class="wrapper">
      <Navbar />
      <Sidebar />
      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
          <div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-6">
                <h1 class="m-0">{{pageTitle}}</h1>
              </div><!-- /.col -->
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                  <li v-for="breadcrumb in breadcrumbs" class="breadcrumb-item" :key="breadcrumb.title">
                    <a href="{{ breadcrumb.link }}">
                      {{ breadcrumb.title }}
                    </a>
                  </li>
                  <li class="breadcrumb-item active">{{ pageTitle }}</li>
                </ol>
              </div><!-- /.col -->
            </div><!-- /.row -->
          </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <div class="content">
          <div class="container-fluid">
            <slot></slot>
          </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
      </div>
      <!-- /.content-wrapper -->

<!-- Main Footer -->
<footer class="main-footer">
  <!-- To the right -->
  <div class="float-right d-none d-sm-inline">
  </div>
  <!-- Default to the left -->
  <strong>Copyright &copy; Tomasz Burzyński.</strong> All rights reserved.
</footer>
</div>
<!-- ./wrapper -->
</template>

The Sidebar.vue:

<script setup lang="ts">
    import Brand from './SidebarParts/Brand.vue';
    // import User from './SidebarParts/User.vue';
    import Menu from './SidebarParts/Menu.vue';
    import { computed } from 'vue'
    import { usePage } from '@inertiajs/vue3'

    const page = usePage()

    const user = computed(() => page.props.auth.user)
</script>
<template>
    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <Brand />
        <div class="sidebar">
            <!-- <User /> -->
            <Menu />
        </div>
    </aside>
</template>

And finally, Menu.vue that contains element which doesn't work for me:

<script setup lang="ts">
    import MenuSection from './MenuSection.vue';
    import MenuItem from './MenuItem.vue';
</script>
<template>
    <!-- Sidebar Menu -->
        <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true">
            <li class="nav-item">
                <a href="#" class="nav-link active">
                    <i class="nav-icon fas fa-tachometer-alt"></i>
                    <p>
                    Starter Pages
                    <i class="right fas fa-angle-left"></i>
                    </p>
                </a>
                <ul class="nav nav-treeview">
                    <li class="nav-item">
                    <a href="#" class="nav-link active">
                        <i class="far fa-circle nav-icon"></i>
                        <p>Active Page</p>
                    </a>
                    </li>
                    <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="far fa-circle nav-icon"></i>
                        <p>Inactive Page</p>
                    </a>
                    </li>
                </ul>
            </li>
            <li class="nav-item">
            <a href="#" class="nav-link">
                <i class="nav-icon fas fa-th"></i>
                <p>
                Simple Link
                <span class="right badge badge-danger">New</span>
                </p>
            </a>
            </li>
        </ul>
    </nav>
    <!-- /.sidebar-menu -->
</template>

I tried to move imports to app without results. I checked if paths are without mistakes, and compared my HTML to AdminLTE life demo and example files. I still can't see what I am doing wrong.

I believe I misunderstood somehow how I should add javascripts to layout if I want it to work only on admin pages, but I just can't find the proper way to do that.