use define model

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>