fix(useTemplateRef): handle useTemplateRef edge case with vFor

[edison1105]

close #12731

the underlying problem is

const elements1 = useTemplateRef('testref') 
// instance.refs['testref'] is a shallowRef
instance.refs['testref'].value = [1]  // value is an array

const elements2 = ref() 
// instance.refs['elements2'] is a ref
instance.refs['elements2'].value = [1]  // value is a reactive array

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB (+4 B)	38 kB (+7 B)	34.2 kB (-7 B)
vue.global.prod.js	158 kB (+4 B)	57.8 kB (+3 B)	51.4 kB (-5 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.4 kB (+32 B)	18.2 kB (+5 B)	16.6 kB (-16 B)
createApp	54.4 kB (+32 B)	21.2 kB (+12 B)	19.3 kB (+13 B)
createSSRApp	58.6 kB (+32 B)	22.9 kB (+4 B)	20.9 kB (+9 B)
defineCustomElement	59.2 kB (+32 B)	22.8 kB (+8 B)	20.7 kB (+8 B)
overall	68.4 kB (+32 B)	26.3 kB (+9 B)	24 kB (-25 B)

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@12733

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@12733

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@12733

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@12733

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@12733

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@12733

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@12733

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@12733

@vue/shared

npm i https://pkg.pr.new/@vue/shared@12733

vue

npm i https://pkg.pr.new/vue@12733

@vue/compat

npm i https://pkg.pr.new/@vue/compat@12733

commit: 2336e2a