Version

3.0.0

Reproduction link

https://codesandbox.io/s/change-english-vision-cnhpw

Steps to reproduce

In the use of setup syntax, the elform of element plus UI uses ref and v-modal at the same time, and the input box will get stuck

The code is as follows

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

import { reactive, getCurrentInstance } from "vue";
export default {
  setup() {
    const ctx = getCurrentInstance();
    const numberValidateForm = reactive({
      age: "",
    });
    const submitForm = (formName) => {
      ctx.refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    const resetForm = (formName) => {
      ctx.refs[formName].resetFields();
    };
    return {
      numberValidateForm,
      submitForm,
      resetForm,
    };
  },
};

Then enter the information in the input box, and the modified button will appear.

What is expected?

Normal input

What is actually happening?

The input data is stuck, which is inconsistent with the actual input of the keyboard

I'm having a problem with the sandbox where it won't load anymore after I made a change, so I an't say for sure, but:

It seems the issue is that the ref name you use is also the name of the state variable: numberValidateForm.

If you have a look at template refs in the composition API docs, you will find this:

In the Virtual DOM patching algorithm, if a VNode's ref key corresponds to a ref on the render context, the VNode's corresponding element or component instance will be assigned to the value of that ref.

In other words: you are replacing the reactive state for the model with the form instance because the ref has the same name as the reactive state object: numberValidateForm.

Solution: use different names for ref and model.

<el-form
    :model="numberValidateForm"
    ref="numberValidateFormRef"
    label-width="100px"
    class="demo-ruleForm"
  >

Better even, would be to not rely on the internal ref implementation of ctx and instead use a template ref in the first place:

import { ref, reactive } from "vue";
export default {
  setup() {
    const numberValidateFormRef = ref()

    const numberValidateForm = reactive({
      age: "",
    });
    const submitForm = () => {
      numberValidateForm.value.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    const resetForm = () => {
      numberValidateForm.value.resetFields();
    };
    return {
      numberValidateFormRef,
      numberValidateForm,
      submitForm,
      resetForm,
    };
  },
};

Please follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting issues. Closing even though @LinusBorg was kind enough to give it a look and help you until a proper reproduction is provided

the codesandbox worked, it was just acting up when i forked it to edit.

After a second attempt I was able to run it with my proposed changes and it works.

@LinusBorg thanks，it's my fault.I refer to the case on the official website of element UI plus and forget to check that refs has the same name as modal. I have solved this problem, thank you for your answer, thanks