vue3+element-plus+ts使用表单遇到的坑

<el-form ref="form" :model="form" label-width="50px">
  <el-col :span="12"
    ><el-form-item label="x轴">
      <el-input v-model="form.left"></el-input> </el-form-item
  ></el-col>
  <el-col :span="12"
    ><el-form-item label="y轴">
      <el-input v-model="form.top"></el-input> </el-form-item
  ></el-col>
</el-form>

import {ref} from "vue";
export default {
  setup() {
    let form = ref({});
    return { form };
  },
};

这一看上面的代码貌似没有什么问题，就是用了ref用作复杂类型，但是应该不影响相应效果啊，也没有报错换成reactive，也不行也不报错，究竟是什么原因，最后我发现是因为html的第一行

<el-form ref="form" :model="form" label-width="50px">

就是这里ref和model竟然绑定重复的变量名字了，他没有报错。如果其他人发现不响应式或者不能输入也可以看看是不是这个原因