fix(runtime-core): vnode.el is null in watcher after rerendering (#2295)

fix #2170

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

@@ -137,4 +137,83 @@ describe('renderer: component', () => {
     await nextTick()
     expect(serializeInner(root)).toBe(`<div>1</div><div>1</div>`)
   })
+
+  // #2170
+  test('should have access to instance’s “$el” property in watcher when setting instance data', async () => {
+    function returnThis(this: any) {
+      return this
+    }
+    const dataWatchSpy = jest.fn(returnThis)
+    let instance: any
+    const Comp = {
+      data() {
+        return {
+          testData: undefined
+        }
+      },
+
+      watch: {
+        testData() {
+          // @ts-ignore
+          dataWatchSpy(this.$el)
+        }
+      },
+
+      created() {
+        instance = this
+      },
+
+      render() {
+        return h('div')
+      }
+    }
+
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+
+    expect(dataWatchSpy).not.toHaveBeenCalled()
+    instance.testData = 'data'
+
+    await nextTick()
+    expect(dataWatchSpy).toHaveBeenCalledWith(instance.$el)
+  })
+
+  // #2170
+  test('should have access to instance’s “$el” property in watcher when rendereing with watched prop', async () => {
+    function returnThis(this: any) {
+      return this
+    }
+    const propWatchSpy = jest.fn(returnThis)
+    let instance: any
+    const Comp = {
+      props: {
+        testProp: String
+      },
+
+      watch: {
+        testProp() {
+          // @ts-ignore
+          propWatchSpy(this.$el)
+        }
+      },
+
+      created() {
+        instance = this
+      },
+
+      render() {
+        return h('div')
+      }
+    }
+
+    const root = nodeOps.createElement('div')
+
+    render(h(Comp), root)
+    await nextTick()
+    expect(propWatchSpy).not.toHaveBeenCalled()
+
+    render(h(Comp, { testProp: 'prop ' }), root)
+    await nextTick()
+    expect(propWatchSpy).toHaveBeenCalledWith(instance.$el)
+  })
 })

packages/runtime-core/src/renderer.ts

@@ -1425,11 +1425,11 @@ function baseCreateRenderer(
         }
 
         if (next) {
+          next.el = vnode.el
           updateComponentPreRender(instance, next, optimized)
         } else {
           next = vnode
         }
-        next.el = vnode.el
 
         // beforeUpdate hook
         if (bu) {