Fix form components

assets/js/components/VCheckbox.vue

@@ -9,28 +9,23 @@
     </div>
 </template>
 
-<script>
-export default {
-    props: {
+<script setup>
+import {computed} from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
     name: {
         required: true,
     },
     id: {
         required: true,
     },
-        value: {},
+    modelValue: {},
     label: {},
-    },
+});
 
-    computed: {
-        inner: {
-            get() {
-                return this.value;
-            },
-            set(v) {
-                this.$emit('input', v === true);
-            },
-        },
-    },
-};
+const inner = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v === true),
+});
 </script>

assets/js/components/VText.vue

@@ -14,24 +14,19 @@
     </label>
 </template>
 
-<script>
-export default {
-    props: {
-        value: {},
+<script setup>
+import {computed} from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    modelValue: {},
     label: {},
     id: {},
     name: {},
-    },
+});
 
-    computed: {
-        inner: {
-            get() {
-                return this.value;
-            },
-            set(v) {
-                this.$emit('input', v);
-            },
-        },
-    },
-};
+const inner = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+});
 </script>