use define model

src/components/Modal.vue

@@ -1,24 +1,11 @@
 <script setup lang="ts">
 import { vOnClickOutside } from '@vueuse/components';
-import { useEventListener, useVModel } from '@vueuse/core';
+import { useEventListener } from '@vueuse/core';
 import { watch } from 'vue';
 
-interface Props {
-    open: boolean;
-}
+const open = defineModel('open', { default: false });
 
-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});
-
-watch(isOpen, value => {
+watch(open, value => {
     if (value) {
         document.body.classList.add('overflow-hidden');
     } else {
@@ -27,18 +14,18 @@ watch(isOpen, value => {
 });
 useEventListener('keyup', e => {
     if (e.key === 'Escape') {
-        isOpen.value = false;
+        open.value = false;
     }
 });
 </script>
 
 <template>
     <Transition name="fade">
-        <template v-if="isOpen">
+        <template v-if="open">
             <div class="fixed inset-0 z-10">
                 <div class="absolute bg-black opacity-80 inset-0 z-0" />
                 <div class="absolute grid inset-0">
-                    <div class="justify-self-center m-auto" v-on-click-outside="() => isOpen = false">
+                    <div class="justify-self-center m-auto" v-on-click-outside="() => open = false">
                         <slot />
                     </div>
                 </div>

src/components/SliderCheckbox.vue

@@ -1,24 +1,11 @@
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core';
 
-interface Props {
-    modelValue?: boolean;
-}
-interface Emits {
-    (e: 'update:modelValue', value: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    modelValue: false
-});
-const emit = defineEmits<Emits>();
-
-const value = useVModel(props, 'modelValue', emit);
+const modelValue = defineModel({ default: false });
 </script>
 
 <template>
     <label class="flex items-center relative w-max cursor-pointer select-none">
-        <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-10 h-5 rounded-full checked:bg-emerald-500 peer" v-model="value" />
+        <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-10 h-5 rounded-full checked:bg-emerald-500 peer" v-model="modelValue" />
         <span class="w-5 h-5 right-5 absolute rounded-full transform transition-transform bg-slate-100 peer-checked:bg-emerald-200" />
     </label>
 </template>

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 />