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>