vee-validateのuseFormが突然readonlyを返していた話

発覚した経緯

[Vue warn] Set operation on key "email" failed: target is readonly. 

コンソールにこいつが出てformが動かなくなっていた。

使用箇所

<script>
import { useForm } from 'vee-validate';

export default {
  setup() {
    const { values } = useForm({ initialValues })
    return {
      values,
    };
  }
}
</script>
<component v-model="values[key]" />

こいつを子コンポーネントでmodelValueとしていろいろ使用していた。
あるときをさかいにwarnが出た。

原因

vee-validateのversionアップデートでuseFormの返すvalueがreadonlyにされているせいだった。

解決策

①vee-validateのversionを下げる。
②v-modelを使用せずにv-bindとv-onに分ける

分ける場合

<script>
import { useForm } from 'vee-validate';

export default {
  setup() {
    const { values, setFieldValue } = useForm({ initialValues })
    return {
      values,
      setFieldValue
    };
  }
}
</script>
<template>
    <component :bindValue="values[key]" @input="setFieldValue(key, $event.target.value)" />
</template>

こんな感じで分けるのがvue3の思想っぽい。でもこの変更をサラッと入れてくるのやばすぎん？

参考urlというか原因のコミット
https://github.com/logaretm/vee-validate/issues/4282