fix: hmr reload should work with async component

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

@@ -29,6 +29,8 @@ function compileToFunction(template: string) {
   return render
 }
 
+const timeout = (n: number = 0) => new Promise(r => setTimeout(r, n))
+
 describe('hot module replacement', () => {
   test('inject global runtime', () => {
     expect(createRecord).toBeDefined()
@@ -805,4 +807,42 @@ describe('hot module replacement', () => {
       `<div><div>1<p>3</p></div></div><div><div>1<p>3</p></div></div><p>2</p>`,
     )
   })
+
+  test('Async component without rerender only', async () => {
+    const root = nodeOps.createElement('div')
+    const childId = 'test-child-id'
+    const Child: ComponentOptions = {
+      __hmrId: childId,
+      data() {
+        return { count: 0 }
+      },
+      render: compileToFunction(`<div>{{ count }}</div>`),
+    }
+    const Comp = runtimeTest.defineAsyncComponent(() => Promise.resolve(Child))
+    const appId = 'test-app-id'
+    const App: ComponentOptions = {
+      __hmrId: appId,
+      render: () => [h(Comp), h(Comp)],
+    }
+    createRecord(appId, App)
+
+    render(h(App), root)
+
+    await timeout()
+
+    expect(serializeInner(root)).toBe(`<div>0</div><div>0</div>`)
+
+    // change count to 1
+    reload(childId, {
+      __hmrId: childId,
+      data() {
+        return { count: 1 }
+      },
+      render: compileToFunction(`<div>{{ count }}</div>`),
+    })
+
+    await timeout()
+
+    expect(serializeInner(root)).toBe(`<div>1</div><div>1</div>`)
+  })
 })

packages/runtime-core/src/hmr.ts

@@ -110,7 +110,8 @@ function reload(id: string, newComp: HMRComponent) {
   // create a snapshot which avoids the set being mutated during updates
   const instances = [...record.instances]
 
-  for (const instance of instances) {
+  for (let i = 0; i < instances.length; i++) {
+    const instance = instances[i]
     const oldComp = normalizeClassComponent(instance.type as HMRComponent)
 
     if (!hmrDirtyComponents.has(oldComp)) {
@@ -139,10 +140,13 @@ function reload(id: string, newComp: HMRComponent) {
       // components to be unmounted and re-mounted. Queue the update so that we
       // don't end up forcing the same parent to re-render multiple times.
       instance.parent.effect.dirty = true
+      const isLast = i === instances.length - 1
       queueJob(() => {
         instance.parent!.update()
-        // #6930 avoid infinite recursion
-        hmrDirtyComponents.delete(oldComp)
+        if (isLast) {
+          // #6930 avoid infinite recursion
+          hmrDirtyComponents.delete(oldComp)
+        }
       })
     } else if (instance.appContext.reload) {
       // root instance mounted via createApp() has a reload method