Bootstrap 5 Collapse cannot collapse after open it (working with vue3)

I am working on a project using Vue 3 and Bootstrap 5. I encountered an issue with Bootstrap collapse. While I am able to successfully open the collapse, I am unable to collapse it again.

package.json

"dependencies": {
    "@ivanv/vue-collapse-transition": "^1.0.2",
    "all": "^0.0.0",
    "axios": "^0.26.1",
    "bootstrap": "^5.3.2",
    "bootstrap-icons": "^1.10.5",
    "bp-vuejs-dropdown": "^2.1.1",
    "chart.js": "^3.6.0",
    "core-js": "^3.6.5",
    "datatables.net-bs5": "^1.13.6",
    "install": "^0.13.0",
    "js-base64": "^3.7.2",
    "lz-string": "^1.5.0",
    "npm": "^9.8.1",
    "vee-validate": "^4.7.4",
    "vue": "^3.0.0",
    "vue-ctk-date-time-picker": "^3.0.0-alpha.0",
    "vue-router": "^4.0.0-0",
    "vue2-daterange-picker": "^0.6.8",
    "vue3-chart-v2": "^0.8.3",
    "vuejs-datetimepicker": "^1.1.13",
    "vuex": "^4.0.0-0",
    "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz"
  },

main.js

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-icons/font/bootstrap-icons.css";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App).use(store).use(router).mount("#app");

myscript.js

<template>
  <div>
    <div class="bg-white">
      <div class="row gap-3">
        <p>
          <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Link with href </a>
          <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Button with data-bs-target
          </button>
        </p>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</div>
        </div>
      </div>
    </div>
  </div>
</template>

I think the issue is related to package conflicts, but I have tried various methods and have not been able to identify the problem.

This also happened to me. I did a lot of searching, but no one had the right answer.

I used Bootstrap v5.3.3 and Vue3. I had no idea why it works :D.

Just Remove any bootstrap/boostrap.bundle.min.js import either in main.js or index.html.

All you need is to import the bootsrap.min.css ONLY on your main.js and boom it's working properly, including the dropdown, accordion, etc.

I even remove popperjs its still working fine.