fix(hmr): force full update in child component on slot update

packages/runtime-core/src/component.ts

@@ -313,7 +313,7 @@ export interface ComponentInternalInstance {
    * hmr marker (dev only)
    * @internal
    */
-  renderUpdated?: boolean
+  hmrUpdated?: boolean
 }
 
 const emptyAppContext = createAppContext()

packages/runtime-core/src/componentRenderUtils.ts

@@ -251,7 +251,7 @@ export function shouldUpdateComponent(
     __DEV__ &&
     (prevChildren || nextChildren) &&
     parentComponent &&
-    parentComponent.renderUpdated
+    parentComponent.hmrUpdated
   ) {
     return true
   }

packages/runtime-core/src/componentSlots.ts

@@ -18,6 +18,7 @@ import {
 import { warn } from './warning'
 import { isKeepAlive } from './components/KeepAlive'
 import { withCtx } from './helpers/withRenderContext'
+import { queuePostFlushCb } from './scheduler'
 
 export type Slot = (...args: any[]) => VNode[]
 
@@ -124,11 +125,17 @@ export const updateSlots = (
   if (vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN) {
     if ((children as RawSlots)._ === 1) {
       // compiled slots.
-      if (
+      if (__DEV__ && instance.parent && instance.parent.hmrUpdated) {
+        // Parent was HMR updated so slot content may have changed.
+        // force update slots and mark instance for hmr as well
+        extend(slots, children as Slots)
+        instance.hmrUpdated = true
+        queuePostFlushCb(() => {
+          instance.hmrUpdated = false
+        })
+      } else if (
         // bail on dynamic slots (v-if, v-for, reference of scope variables)
-        !(vnode.patchFlag & PatchFlags.DYNAMIC_SLOTS) &&
-        // bail on HRM updates
-        !(__DEV__ && instance.parent && instance.parent.renderUpdated)
+        !(vnode.patchFlag & PatchFlags.DYNAMIC_SLOTS)
       ) {
         // compiled AND static.
         // no need to update, and skip stale slots removal.

packages/runtime-core/src/hmr.ts

@@ -70,9 +70,9 @@ function rerender(id: string, newRender?: Function) {
     }
     instance.renderCache = []
     // this flag forces child components with slot content to update
-    instance.renderUpdated = true
+    instance.hmrUpdated = true
     instance.update()
-    instance.renderUpdated = false
+    instance.hmrUpdated = false
   })
 }
 

packages/runtime-core/src/renderer.ts

@@ -779,7 +779,7 @@ function baseCreateRenderer(
       invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate')
     }
 
-    if (__DEV__ && parentComponent && parentComponent.renderUpdated) {
+    if (__DEV__ && parentComponent && parentComponent.hmrUpdated) {
       // HMR updated, force full diff
       patchFlag = 0
       optimized = false
@@ -1006,7 +1006,7 @@ function baseCreateRenderer(
       optimized = true
     }
 
-    if (__DEV__ && parentComponent && parentComponent.renderUpdated) {
+    if (__DEV__ && parentComponent && parentComponent.hmrUpdated) {
       // HMR updated, force full diff
       patchFlag = 0
       optimized = false