"target is readonly" error on nested form value fields

[franck102]

Hi all,

Since updating from vue 3.3.3 + vee-validate 4.7.3 to vue 3.3.13 + vee-validate 4.12.4 I am getting this error when a control tries to modify the value of a nested field in a form, defined using useForm:

[Vue warn] Set operation on key "years" failed: target is readonly.
Proxy(Object)
[[Handler]]: MutableReactiveHandler
_isReadonly: false
_shallow: false
[[Prototype]]: BaseReactiveHandler
[[Target]]: Object
years: 1
[[Prototype]]: Object
[[IsRevoked]]: false

I have created a simple Stackblitz project that shows the issue, any suggestion as to how I should fix this?

https://stackblitz.com/edit/vitejs-vite-vp1rmj?file=src%2FApp.vue

Here is the complete component's code:

<template>
  <form ref="form" role="form" @submit.prevent="onSubmit">
    <input type="number" name="years" v-model="formValues.duration.years">
  </form>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useForm } from "vee-validate"

interface _Duration {
  years?: number,
  months?: number,
  weeks?: number
}

interface FormValues {
  duration: _Duration
}

const initialValues = computed(() =>
    ({
      duration: { years: 1 }
    }));

const {
  handleSubmit, values: formValues
} = useForm<FormValues>({
  initialValues: initialValues.value
});

const form = ref(null);
function handleSave(values: FormValues) {
  console.log("Saving " + values)
}
// function handleErrors({ values }): void {
//   console.log("Errors " + values)
// }

const onSubmit = handleSubmit(handleSave);

</script>


Thanks!
Franck

[franck102]

Solved this, I shouldn't bind formValues using v-model and I need to use useField instead.