Tooltips rendered after onMounted aren't initializing

[jimmiejackson414]

I have a Nuxt3 project that I'm currently implementing tooltips in. I have a side navigation bar that uses tooltips, and they work fine.

I have a page where data is being loaded during the onMounted lifecycle from the backend, and so while that is being loaded, the page has a spinner inside of a v-if. Once the data loads into my store, the v-else triggers and the child components render to the page (including the tooltips).

I believe that because the components render "late" in this way, the tooltips can't initialize properly. I've tried importing the initTooltips method from flowbite and setting a watcher on the data, so that once the data is loaded then I can initialize the tooltips, however this still doesn't work. Any ideas how I can get this to work?

Here's the simplified version:
page.vue

<script lang='ts' setup>
  import { initTooltips } from 'flowbite';

  const { data, pageLoading } = storeToRefs($store);

  watch(data, async (newVal) => {
    if (newVal.selected?.categories.length && !pageLoading.value) {
      await nextTick();
      console.log(`initTooltips`);
      initTooltips();
    }
  }, { deep: true });
</script>

<template>
  <div>
    <loading-page v-if="pageLoading" />
    <div v-else>
      ...child components with tooltips
    </div>
  </div>
</template>