Why is tooltip breaking collapse functionality in Vue 3 and Bootstrap 5?

You haven't instantiated Bootstrap properly. You were using:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js'; // ❌ nope

instead of

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap'; // ✅ happy days

This seems to fix the error. I haven't looked into why it happens, but my wild guess is some stuff (e.g: collapse!?) gets imported/instantiated more than once.

Demo.

Additionally, I found two more unrelated errors (while I was looking for anything that might cause your problem):

1. App.vue should not have an id of app on the root element, because the entire app is mounted in the already existing div#app (from public/index.html), which results in the following faulty markup (ids should be unique):

<div id="app">
  <div id="app">
    ... your app here
  </div>
</div>

2. You seem to be instantiating the Tooltip differently than what the docs are showing ¹.
   In the docs, the first param of the Tooltip constructor is always the element selector, not the tooltip container. The container selector (or element) should be passed using the container option.
   I'm quite surprised it works the way you're using it. I beleive the correct way to do it is:

new Tooltip('[data-bs-toggle="tooltip"]', {
  // can be skipped, `document.body` is the default value
  container: document.body,
  // other options, instead of providing them via data-bs-* attributes...
})

¹ - Although what you're using seems to produce the desired outcome, I thought I should mention it since it's not complying with the documentation and might stop working at any point.