Vue 3 Composition - directive that creates a tooltip does not appear on siblings elements

Question

I'm currently having an issue with a custom directive that should make a tooltip appear above an element, when this one is using v-tooltip.

I created the directive in my main.ts file as follow:

app.directive('tooltip', (el: HTMLElement, binding: DirectiveBinding) => {
    const tooltipId = `${el.id}-tooltip`

    if (!binding.value) {
      const el = document.getElementById(tooltipId)
      if (el) el.parentElement!.removeChild(el)
      return
    }

    const node = createVNode(MyTooltip, {
      key: tooltipId
      id: tooltipId,
      triggerId: el.id,
      text: binding.value,
    })
    render(node, el.parentElement!)
})

This code is supposed to create the tooltip, appends it to the parent of the element's calling, and render based on the id of the element that is using it.

And it works very well! ... As long I don't have two siblings using a tooltip. In this case, only one tooltip is rendered, while the directive is called twice... I took care of specifying different keys for each tooltip component, but it's only rendering one tooltip. Do you know why ? I couldn't find this kind of examples in the docs.

I made a repo that highlights this issue : https://github.com/Ericlm/vue-test-directive