Hide interactive tippy by clicking button inside content

Hi! Help me please. I had made vue3 + vue-tippy dropdown component:

<tippy
        ref="tippyRef"
        animate-fill
        :arrow="false"
        :duration="[100, 50]"
        :interactive="true"
        :offset="offset"
        :placement="placement"
        theme="dropdown"
        trigger="click">
        <slot name="toggle">
            <AppBtn :variant="variant">
                {{ text }}
            </ZBtn>
        </slot>

        <template #content>
                <slot></slot>
        </template>
</tippy>

Question is: how can i close tippy when user clicks interactive element (buttons, links) inside <slot> content. ClickOutside is working but any presses inside #content are ignored

[KABBOUCHI]

you can grab the hide method and execute it

<template #content="{ hide }" >
  <button @click="hide()">&times;</button>
</template>

using ur example:

<tippy interactive>
   <slot name="toggle">
      <AppBtn :variant="variant">
        {{ text }}
      </AppBtn>
   </slot>
   <template #content="{ hide }">
      <slot :hide="hide"></slot>
   </template>
</tippy>

// if u have only 1 slot
<Dropdown text="test" v-slot="{ hide }">
   <button @click="hide()">&times;</button>
   <button @click="hide()">&times;</button>
</Dropdown>

// if u have many slots
<Dropdown text="test">
 <template #default="{ hide }">
   <button @click="hide()">&times;</button>
   <button @click="hide()">&times;</button>
 </template>
</Dropdown>

[Lexpeartha]

Upon further inspecting, it seems like whole object is an instance