fix(runtime-core): handle patch stable fragment edge case

packages/runtime-core/src/renderer.ts

@@ -1079,7 +1079,8 @@ function baseCreateRenderer(
         dynamicChildren &&
         // #2715 the previous fragment could've been a BAILed one as a result
         // of renderSlot() with no valid children
-        n1.dynamicChildren
+        n1.dynamicChildren &&
+        n1.dynamicChildren.length === dynamicChildren.length
       ) {
         // a stable fragment (template root or <template v-for>) doesn't need to
         // patch children order, but it may contain dynamicChildren.

packages/vue/__tests__/index.spec.ts

@@ -311,4 +311,34 @@ describe('compiler + runtime integration', () => {
     app.mount(root)
     expect(root.innerHTML).toBe('<div>60000000100000111</div>')
   })
+
+  test('should correctly update when reactive state and normal array are modified', async () => {
+    const count = ref(0)
+    const foo: any[] = []
+    function updateFoo() {
+      for (let n = 0; n < 3; n++) {
+        foo[n] = n + 1 + '_foo'
+      }
+    }
+    const app = createApp({
+      setup() {
+        return {
+          count,
+          foo,
+        }
+      },
+      template: `
+      <div>{{count}}</div>
+      <div v-for='item in foo'>{{ item }}</div>`,
+    })
+    const root = document.createElement('div')
+    app.mount(root)
+    expect(root.innerHTML).toBe('<div>0</div>')
+    updateFoo()
+    count.value++
+    await nextTick()
+    expect(root.innerHTML).toBe(
+      '<div>1</div><div>1_foo</div><div>2_foo</div><div>3_foo</div>',
+    )
+  })
 })