Bootstrap 5 with Vue and shadow dom - vuejs3

Question

I am trying to use bootstrap 5 with Vuejs and shadow dom (Vue custom element). The standard bootstrap css classes work, but the bootstrap components do not seem to work.
I have tried the solution suggested in https://ilikekillnerds.com/2022/08/how-to-use-bootstrap-javascript-components-inside-of-shadow-dom-web-components/ which initializes the bootstrap 5 component properly but all the event handlers are not bound.
I have tried implementing the dropdown component by initializing the Dropdown component from bootstrap myself.
<template>
<div class="dropdown" ref="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</template>
<script setup lang="ts">
import { Dropdown } from 'bootstrap'
import { ref } from 'vue'
const dropdown = ref()
let dropdownEl: Dropdown
onMounted(() => {
if (dropdown.value) {
dropdownEl = new Dropdown(dropdown.value)
}
})
The dropdown does not work(I'm assuming due to the shadow dom, this works on non-shadow dom vuejs project). Do all events like closing/opening the dropdown have to be manually implemented?