use define model

src/components/tooltip/Tooltip.vue

@@ -1,23 +1,10 @@
 <script setup lang="ts">
 import { vElementHover } from '@vueuse/components';
-import { useElementBounding, useVModel } from '@vueuse/core';
+import { useElementBounding } from '@vueuse/core';
 import { computed, ref } from 'vue';
 import { useSharedWindowSize } from './tooltip';
 
-interface Props {
-    open: boolean;
-}
-
-interface Emit {
-    (e: 'update:open', value: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    open: false,
-});
-const emit = defineEmits<Emit>();
-
-const isOpen = useVModel(props, 'open', emit, {passive: true});
+const open = defineModel('open', { default: false });
 
 const { width, height } = useSharedWindowSize();
 const mainDiv = ref<HTMLDivElement | null>(null);
@@ -39,16 +26,16 @@ const positions = computed(() => {
 
 <template>
     <div ref="mainDiv" clas="flex flex-col items-center justify-center" :class="{
-        'open': isOpen,
+        'open': open,
         'tooltip-top': positions.includes('top'),
         'tooltip-bottom': positions.includes('bottom'),
         'tooltip-left': positions.includes('left'),
         'tooltip-right': positions.includes('right')
     }">
-        <div v-element-hover="(h: boolean) => isOpen = h" class="m-auto header">
+        <div v-element-hover="(h: boolean) => open = h" class="m-auto header">
             <slot name="header" />
         </div>
-        <div v-if="isOpen" class="m-auto">
+        <div v-if="open" class="m-auto">
             <div class="z-10 relative">
                 <div class="absolute">
                     <slot />