Vue2.7 setup v-model报错Avoid adding reactive properties to a Vue instance or its root $data

拷贝了一个elment form demo

setup 属性

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-form-item
    label="年龄"
    prop="age"
    :rules="[
      { required: true, message: '年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
  >
    <el-input v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
  </el-form-item>
</el-form>



<script setup>
const numberValidateForm = ref({
age: ''})

</script>

会报错vue.runtime.esm.js:4625 [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.

是因为ref 也是numberValidateForm，所以只要把ref=“numberValidateForm” 换个名字就可以了