diff --git a/assets/js/components/VCheckbox.vue b/assets/js/components/VCheckbox.vue
index 72a27a9..adb27da 100644
--- a/assets/js/components/VCheckbox.vue
+++ b/assets/js/components/VCheckbox.vue
@@ -9,28 +9,23 @@
     </div>
 </template>
 
-<script>
-export default {
-    props: {
-        name: {
-            required: true,
-        },
-        id: {
-            required: true,
-        },
-        value: {},
-        label: {},
-    },
+<script setup>
+import {computed} from 'vue';
 
-    computed: {
-        inner: {
-            get() {
-                return this.value;
-            },
-            set(v) {
-                this.$emit('input', v === true);
-            },
-        },
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    name: {
+        required: true,
+    },
+    id: {
+        required: true,
     },
-};
+    modelValue: {},
+    label: {},
+});
+
+const inner = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v === true),
+});
 </script>
diff --git a/assets/js/components/VText.vue b/assets/js/components/VText.vue
index 07930f7..bf63e4b 100644
--- a/assets/js/components/VText.vue
+++ b/assets/js/components/VText.vue
@@ -14,24 +14,19 @@
     </label>
 </template>
 
-<script>
-export default {
-    props: {
-        value: {},
-        label: {},
-        id: {},
-        name: {},
-    },
+<script setup>
+import {computed} from 'vue';
 
-    computed: {
-        inner: {
-            get() {
-                return this.value;
-            },
-            set(v) {
-                this.$emit('input', v);
-            },
-        },
-    },
-};
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    modelValue: {},
+    label: {},
+    id: {},
+    name: {},
+});
+
+const inner = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+});
 </script>