How to create Popover component (Vue3, script setup and BS5)

Popover.vue

<template>
    <slot />
</template>
<script setup>
import { Popover } from 'bootstrap'
import { onMounted } from 'vue'
import { useSlots } from 'vue';

const slots = useSlots();
const props = defineProps({
    content: {
        required: false,
        default: '',
    },
    title: {
        default: 'My Popover',
    },
    trigger: {
        default: 'hover',
    },
    delay: {
        default: 0,
    },
    html: {
        default: false,
    },
})

onMounted(() => {
    const ele = slots.default()[0].el
    new Popover(ele, props)
})
</script>

Usage:

import Popover from '@/components/Popover.vue'
<popover title="My title" content="My content"><button>Click</button></popover>

I tested it but in my case ele is always null.

Can you provide a fiddle?

I am not an expert in vue (just starting)
here the fiddle:
https://codesandbox.io/s/vue-composition-api-example-forked-dnnxig?file=/src/App.vue