TemplateRef overwrites reactive data

[liuxiaojun666]

Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eNp9Ustu4zAM/BVCWCApUEvAPi6GW2SPe96rLonNNNpaj5UoN4Xhfy8lB23aAvWJj9EMOfQsfocgp4yiFV3qowkECSmHe+2MDT4SzBBx35OZEBY4Rm9hw/iNdtr13iWCo48W7l5R25lbRHimFjbn85mRy412nVrpmZgTQhvGPSFnAF1liHi806KEWsAu5YM1JEPECV15BPx1KezdfYHIlZ9JS+XSNS5kgqmxfsDxwlWBTEjPAbm0ZquqKv0a1rSsXGiu6K9UIdHzWBh6P/rYPkREx0Tz/IaHZXk3z/YPe3nyeRzggFC8Mol4GXgydII6LPtSBlmla3zIRN7Brh9N/8hy39iWJKtGxP8ZE/2tzmxvWH01qVPrIybp1Kux4lasB2zsPsh/yTs+MZ+GdS6NpEULtVJqfNOSa3EiCqlVKrvw+CB7b9WOeypmR8ZiM3i7+yG/y5+/1MD7XNclJtscon9KGFlRi9srcsXFCWMT0Q0YMX4p9gH7TvBD75No0Vz4nxPLC5tJ/Sc=

Steps to reproduce

Enter content in input

<script setup>
import { reactive } from 'vue'

const form = reactive({
	text: 'xxx'
})
</script>

<template>
  <form ref="form" @submit.prevent>
    <span>form.text: </span>
    <input v-model="form.text" type="text">
  </form>
  
  <p>
    form.text: 
    <span style="color:green">{{ form.text }}</span>
    (It should be consistent with input)
  </p>
  
  <button @click="$refs.form.requestSubmit()">submit</button>
</template>

What is expected?

named ref, Non-ref data should not be contaminated.

What is actually happening?

After mounted, the active data is overwritten by the template ref with the same name.

System Info

System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
    Memory: 69.42 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.1/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Safari: 14.1.1
  npmPackages:
    vue: ^3.2.45 => 3.2.45 

Any additional comments?

This PR fixes it.
#7522