fix(runtime-core):v-for ref behaves differently under prod and dev #6697

packages/runtime-core/__tests__/rendererTemplateRef.spec.ts

@@ -493,4 +493,48 @@ describe('api: template refs', () => {
     await nextTick()
     expect(mapRefs()).toMatchObject(['2', '3', '4'])
   })
+
+  // #6697 v-for ref behaves differently under production and development
+  test('named ref in v-for , should be responsive when rendering', async () => {
+    const list = ref([1, 2, 3])
+    const listRefs = ref([])
+    const App = {
+      setup() {
+        return { listRefs }
+      },
+      render() {
+        return  h(
+                'div',
+                null,
+                [
+                  h('div',null,String(listRefs.value)),
+                  h(
+                      'ul',
+                      list.value.map(i =>
+                          h(
+                              'li',
+                              {
+                                ref: 'listRefs',
+                                ref_for: true
+                              },
+                              i
+                          )
+                      )
+                  )
+                ]
+            )
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(App), root)
+
+    await nextTick()
+    expect(String(listRefs.value)).toBe('[object Object],[object Object],[object Object]')
+    expect(serializeInner(root)).toBe('<div><div>[object Object],[object Object],[object Object]</div><ul><li>1</li><li>2</li><li>3</li></ul></div>')
+
+    list.value.splice(0,1);
+    await nextTick()
+    expect(String(listRefs.value)).toBe('[object Object],[object Object]')
+    expect(serializeInner(root)).toBe('<div><div>[object Object],[object Object]</div><ul><li>2</li><li>3</li></ul></div>')
+  })
 })

packages/runtime-core/src/rendererTemplateRef.ts

@@ -12,7 +12,7 @@ import {
 import { isAsyncWrapper } from './apiAsyncComponent'
 import { getExposeProxy } from './component'
 import { warn } from './warning'
-import { isRef } from '@vue/reactivity'
+import {isRef, reactive} from '@vue/reactivity'
 import { callWithErrorHandling, ErrorCodes } from './errorHandling'
 import { SchedulerJob } from './scheduler'
 import { queuePostRenderEffect } from './renderer'
@@ -61,7 +61,7 @@ export function setRef(
     return
   }
   const oldRef = oldRawRef && (oldRawRef as VNodeNormalizedRefAtom).r
-  const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs
+  const refs = owner.refs === EMPTY_OBJ ? (owner.refs = reactive({})) : owner.refs
   const setupState = owner.setupState
 
   // dynamic ref changed. unset old ref