我是vue.js的新手，我正在尝试使用Vue，vuetify和vuelidate制作一个表单。如果我不 Package v-text-field：没问题。如果我把它 Package 成组件：问题。值没有更新，并且出现警告“[Vue warn] Set operation on key“model”failed：目标为只读。“
你可以看到在这个沙盒上发生了什么：
https://codesandbox.io/s/distracted-newton-dx9p4s?file=/src/components/Form.vue
看看代码（我正在关注的）：
Form.vue：

<script setup>
import { reactive } from "vue";
import { useVuelidate } from "@vuelidate/core";
import { required } from "@vuelidate/validators";
import StyledInput from "./StyledInput.vue";
import StyledInput2 from "./StyledInput2.vue";
import StyledInput3 from "./StyledInput3.vue";

const formData = reactive({
  username: "",
  username2: "",
  username3: "",
  username4: "",
});

const rules = {
  username: { required },
  username2: { required },
  username3: { required },
  username4: { required },
};

const v$ = useVuelidate(rules, formData);
</script>

<template>
  <v-text-field
    v-model="formData.username"
    label="Username 1"
    @input="v$.username.$touch;"
    @blur="v$.username.$touch"
    variant="outlined"
  ></v-text-field>
  <div>{{ formData.username }}</div>
  <StyledInput
    :model="formData.username2"
    label="Username 2"
    :fieldData="v$.username2"
  />
  <div>{{ formData.username2 }}</div>
  <StyledInput2
    :model="formData.username3"
    label="Username 3"
    :fieldData="v$.username3"
  />
  <div>{{ formData.username3 }}</div>
  <StyledInput3
    v-model="formData.username4"
    label="Username 4"
    :fieldData="v$.username4"
  />
  <div>{{ formData.username4 }}</div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

MyInput.vue：

<script setup>
const props = defineProps({
  model: {
    //type: String,
    required: true,
  },
  label: {
    type: String,
    required: true,
  },
  fieldData: {
    type: Object,
    required: true,
  },
});
</script>

<template>
  <v-text-field
    v-model="props.model"
    :label="props.label"
    :error-messages="props.fieldData.$errors.map((e) => e.$message)"
    @input="props.fieldData.$touch;"
    @blur="props.fieldData.$touch"
    variant="outlined"
  ></v-text-field>
</template>

<style></style>

StyledInput.vue:

<script setup>
import MyInput from "./MyInput.vue";

const props = defineProps({
  model: {
    //type: String,
    required: true,
  },
  label: {
    type: String,
    required: true,
  },
  fieldData: {
    type: Object,
    required: true,
  },
});
</script>

<template>
  <MyInput v-bind="props"></MyInput>
</template>

<style></style>

我在沙盒上提供了更多不同的尝试。我不明白我做错了什么，有什么想法吗？
谢谢你