From e0b26c483a1ba407a818b1fcba1a439df24e84a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E8=A7=81=E6=9C=88?=
 <61452855+nooooooom@users.noreply.github.com>
Date: Tue, 23 Aug 2022 09:22:45 +0800
Subject: [PATCH] fix: fix parent of multi-nested HOC $el not updating (#12757)

fix #12589
---
 src/core/instance/lifecycle.ts                  | 11 +++++++++--
 test/unit/modules/vdom/patch/edge-cases.spec.ts |  4 ++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/core/instance/lifecycle.ts b/src/core/instance/lifecycle.ts
index df70b7113fd..94f42e27eb5 100644
--- a/src/core/instance/lifecycle.ts
+++ b/src/core/instance/lifecycle.ts
@@ -83,8 +83,15 @@ export function lifecycleMixin(Vue: typeof Component) {
       vm.$el.__vue__ = vm
     }
     // if parent is an HOC, update its $el as well
-    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
-      vm.$parent.$el = vm.$el
+    let wrapper: Component | undefined = vm
+    while (
+      wrapper &&
+      wrapper.$vnode &&
+      wrapper.$parent &&
+      wrapper.$vnode === wrapper.$parent._vnode
+    ) {
+      wrapper.$parent.$el = wrapper.$el
+      wrapper = wrapper.$parent
     }
     // updated hook is called by the scheduler to ensure that children are
     // updated in a parent's updated hook.
diff --git a/test/unit/modules/vdom/patch/edge-cases.spec.ts b/test/unit/modules/vdom/patch/edge-cases.spec.ts
index 10b8ad8179d..f9295533b1e 100644
--- a/test/unit/modules/vdom/patch/edge-cases.spec.ts
+++ b/test/unit/modules/vdom/patch/edge-cases.spec.ts
@@ -257,11 +257,15 @@ describe('vdom patch: edge cases', () => {
 
     expect(vm.$refs.foo.$refs.bar.$el.tagName).toBe('DIV')
     expect(vm.$refs.foo.$refs.bar.$el.className).toBe(`hello`)
+    expect(vm.$el.tagName).toBe('DIV')
+    expect(vm.$el.className).toBe(`hello`)
 
     vm.$refs.foo.$refs.bar.ok = false
     waitForUpdate(() => {
       expect(vm.$refs.foo.$refs.bar.$el.tagName).toBe('SPAN')
       expect(vm.$refs.foo.$refs.bar.$el.className).toBe(`hello`)
+      expect(vm.$el.tagName).toBe('SPAN')
+      expect(vm.$el.className).toBe(`hello`)
     }).then(done)
   })