How to add custom theme on NUXT 3?

[telisjok]

Hi, I just installed floating-vue on my application and was able to start using it just fine but now I need to create my own custom theme in order to customize the tooltip.
The app is built on NUXT 3 and my code for the Tooltip component so far is this.

<template>
  <span class="cursor-pointer" 
    v-tooltip="{
      content: blok.message,
      theme: 'custom-tooltip'
    }"
  >
    *
  </span>
</template>

<script lang="ts" setup>
const props = defineProps({
  blok: {
    type: Object,
    required: true,
  },
})
</script>

<style lang="scss" scoped>
.v-popper__theme-custom-tooltip {
  .v-popper__inner {
    @apply bg-gray-100;
  }
}
</style>

Right now the tooltip is not even being displayed. If I remove the theme: 'custom-tooltip' from the object that goes in v-tooltip then the tooltip works and is being displayed.

Am I doing something wrong? I tried it like this because this is what is being said in the official docs (see here).