Bootstrap js files not working in vue 3 options api custom element

I am trying to use Bootstrap 5 in a Vue 3 Options Api custom element. I have been having issues with loading bootstrap correctly. This is my main.ts file:

import { defineCustomElement } from 'vue'
import 'bootstrap/dist/js/bootstrap.bundle'
import App from './App.ce.vue'

let element = defineCustomElement(App);

customElements.define("app-trackingsidebar", element);

and the vue.config.js file:

module.exports = {
    productionSourceMap: true,
    parallel: false,
    css: {
        extract: false,
    },
    configureWebpack: {
        entry: './src/main.ts',
        optimization: {
            splitChunks: false,
            minimize: false
        },
        resolve: {
            extensions: ['.ts', '.tsx', '.vue', '.js', '.json'],
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    options: { appendTsSuffixTo: [/\.vue$/] },
                    exclude: /node_modules/,
                },
            ],
        },
    },

};

and in my App.ce.vue I am also loading bootstrap.min.css using a Link element at the top of the template element but I downloaded the respecting version of the file and I am serving it from my own server and it's working:

<template>
  <link href="<Link to bootstrap.min.css>" rel="stylesheet"
    crossorigin="anonymous">
- - - 
</template>

my package.json file:

{
  "name": "projectName",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@vue/web-component-wrapper": "^1.3.0",
    "@vueuse/core": "^10.5.0",
    "bootstrap": "^5.3.3",
    "vue-loader": "^16.8.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-typescript": "^5.0.8",
    "@vue/cli-service": "~5.0.0",
    "@vue/compiler-sfc": "^3.3.8",
    "ts-loader": "^9.5.0",
    "typescript": "^5.2.2",
    "vue": "^3.3.4"
  }
}

I can use only the js file from the build because of the projects situation.

The Bootstrap styles and classes work because of the link element which loaded bootstrap.min.css but I cannot get the functionality, for example: I want to use accordions and the styles work, but the accordions themselves don't work when I click on them, non of them open or close.

Search parameters and Tracking parameters are the buttons for the accordions but they only look like buttons and don't do anything.

since custom elements are rendered in a Shadow DOM, I can't use anything other than the stuff in the CEs project.

I have confirmed that there are bootstrap js code in my build file as there are such code in my build along with some bootstrap function:

/*!
  * Bootstrap v5.3.3 (https://getbootstrap.com/)
  * Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */

/**
   * --------------------------------------------------------------------------
   * Bootstrap util/index.js
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   * --------------------------------------------------------------------------
   */

/**
   * --------------------------------------------------------------------------
   * Bootstrap dom/manipulator.js
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   * --------------------------------------------------------------------------
   */

/**
   * --------------------------------------------------------------------------
   * Bootstrap util/config.js
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   * --------------------------------------------------------------------------
   */

// and some more

This made me be able to approve that the bootstrap.bundle.min.js file was loaded successfully within the project. I can't figure out why the functionality isn't there and the accordions aren't working.

OP decided to use TailwindCSS rather than Bootstrap because of those reasons. Indeed, the project does not have any updates regarding a possible VueJS v3 usage and there are better alternatives nowadays for a more flexible design + with better performance.