Binding defineField return values into Objects

[kokhoor]

I am trying to bind return value from defineFields into an object to create dynamic fields.
Although it works, the initial value of both form fields are displayed as: [object Object]
Anyway to fix this?

Any help will be appreciated. Code snippet below:

<script setup="ts">
...
const formValidation = {
  "code": "required",
  "name": "required"
};

const {
    values: formValues,
    validate,
    errors: formErrors,
    setErrors,
    setFieldValue,
    defineField,
    validateField,
} = useForm({
    validationSchema: formValidation,
    initialValues: {
        'name': '',
        'code': ''
    }
});

const formFields = {};
const formFieldsAttr = {};
const fields = ["code", "name"];
for (field of fields) {
  [formFields[field], formFieldsAttr[field]] = defineField(field);
}
...
</script>
<template>
    <v-text-field v-for="field in fields" class="mb-0" variant="outlined" color="primary" v-model="formFields[field]"
                    v-bind="formFieldsAttr[field]" hide-details></v-text-field>
</template>

Thanks in advance.

[kokhoor]

Actually instead of formFields[field], I used an object instead so it is v-model="formFields[col.field]"
Not sure if the cause is due to this.

[kokhoor]

My problem magically resolve itself when I move the into a component. Below is the snippet. Hope it helps anyone who encounters the same problem:

in my main form:

<template>
  ...
  <FormField :label="col.label" v-model="formFields[col.field]" v-bind="formFieldsAttr[col.field]">
                </FormField>
</template>
<script setup lang="ts">
...
const formFields = {};
const formFieldsAttr = {};
for (const row of formSchema) {
    for (const col of row.children) {
        [formFields[col.field], formFieldsAttr[col.field]] = defineField(col.field);
    }
}
...
</script>

in my FormField.vue:

<template>
    <v-label class="mb-1 font-weight-medium">{{ label }}</v-label>
    <v-text-field class="mb-0" variant="outlined" color="primary" v-model="value" hide-details></v-text-field>
</template>

<script setup lang="ts">
...
const emit = defineEmits(["update:modelValue"]);

const value = ref(modelValue);

watch(value, (newValue) => {
    emit("update:modelValue", newValue);
});
</script>