El-Form: vue ref attribute overlaps field with the same name

[bearbattle]

Bug description

When using <el-form>, giving the form with ref attribute the same as model attribute would cause inappropriate behaviour of accessing data field associated with the model attribute.

What is the current behavior?

Given the code below:

<template>
    <el-form
        ref="form"
        :model="form"
    >
    </el-form>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
  name: 'BugReport',
  setup() {
    const form = reactive({ foo: 'bar'})
    return {
      form,
    }
  },
  mounted() {
    console.log(this.form) // This gives the content of *`<el-form>`* rather than `{foo: 'bar'}`
  }
})
</script>

What is the expected behavior?

this.form should provide the content of filed previously defined.

Steps to Reproduce

Refer to code above.

Live Demo:

Bug Report for Element3

Environment

• Element3 Version: 0.0.40
• Node Version: v14.17.3
• OS and version: Windows 10 LTSC 2019 (Version 1809)

[shawroger]

Perhaps it can be in this way.

Avoid using option-style mounted api, use onMounted instead.

import { defineComponent, reactive, onMounted } from 'vue'
export default defineComponent({
  name: 'BugReport',
  setup() {
    const form = reactive({ foo: 'bar'})
    onMounted(() => console.log(form));
    return {
      form,
    }
  },
})