autoform no mutating props

frontend/components/global/AutoForm.vue

@@ -124,13 +124,13 @@
           style="width: 100%"
         >
           <v-menu offset-y>
-            <template #activator="{ props }">
+            <template #activator="{ props: templateProps }">
               <v-btn
                 class="my-2 ml-auto"
                 style="min-width: 200px"
                 :color="modelValue[inputField.varName]"
                 dark
-                v-bind="props"
+                v-bind="templateProps"
               >
                 {{ inputField.label }}
               </v-btn>
@@ -196,7 +196,7 @@
   </v-card>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { validators } from "@/composables/use-validators";
 import { fieldTypes } from "@/composables/forms";
 import type { AutoFormItems } from "~/types/auto-forms";
@@ -205,13 +205,10 @@ const BLUR_EVENT = "blur";
 
 type ValidatorKey = keyof typeof validators;
 
-export default defineNuxtComponent({
-  name: "AutoForm",
-  props: {
-    modelValue: {
-      default: null,
-      type: [Object, Array],
-    },
+// Use defineModel for v-model
+const modelValue = defineModel<[object, Array<any>]>();
+
+const props = defineProps({
   updateMode: {
     default: false,
     type: Boolean,
@@ -244,9 +241,10 @@ export default defineNuxtComponent({
     default: null,
     type: Array as () => string[],
   },
-  },
-  emits: ["blur", "update:modelValue"],
-  setup(props, context) {
+});
+
+const emit = defineEmits(["blur", "update:modelValue"]);
+
 function rulesByKey(keys?: ValidatorKey[] | null) {
   if (keys === undefined || keys === null) {
     return [];
@@ -286,20 +284,8 @@ export default defineNuxtComponent({
 }
 
 function emitBlur() {
-      context.emit(BLUR_EVENT, props.modelValue);
+  emit(BLUR_EVENT, modelValue.value);
 }
-
-    return {
-      rulesByKey,
-      defaultRules,
-      removeByIndex,
-      getTemplate,
-      emitBlur,
-      fieldTypes,
-      validators,
-    };
-  },
-});
 </script>
 
 <style lang="scss" scoped></style>