From e2318379445053528255914b9524e23695c72e8f Mon Sep 17 00:00:00 2001
From: ygj6 <yuangongji@foxmail.com>
Date: Thu, 27 May 2021 15:12:42 +0800
Subject: [PATCH] fix(dev): setup data in nextTick is proxied to vm._data.
 (#697)

---
 src/utils/instance.ts |  3 +++
 test/setup.spec.js    | 28 ++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/src/utils/instance.ts b/src/utils/instance.ts
index 5abfa75e..157a108b 100644
--- a/src/utils/instance.ts
+++ b/src/utils/instance.ts
@@ -39,6 +39,9 @@ export function asVmProperty(
       // expose binding to Vue Devtool as a data property
       // delay this until state has been resolved to prevent repeated works
       vm.$nextTick(() => {
+        if (Object.keys(vm._data).indexOf(propName) !== -1) {
+          return
+        }
         if (isRef(propValue)) {
           proxy(vm._data, propName, {
             get: () => propValue.value,
diff --git a/test/setup.spec.js b/test/setup.spec.js
index e1ac9a6d..d63f72c4 100644
--- a/test/setup.spec.js
+++ b/test/setup.spec.js
@@ -942,6 +942,34 @@ describe('setup', () => {
     expect(vm.$el.textContent).toBe('1')
   })
 
+  // #679 html text change
+  it('should id not change when msg changed in development', async () => {
+    global.__DEV__ = true
+    const vm = new Vue({
+      template: '<div>{{ id }} {{ msg }}<button @click="change"/></div>',
+      setup() {
+        return { id: 42 }
+      },
+      data() {
+        return {
+          id: 1,
+          msg: 'abc',
+        }
+      },
+      methods: {
+        change() {
+          this.msg = this.msg + this.id
+        },
+      },
+    }).$mount()
+
+    await nextTick()
+    expect(vm.$el.textContent).toBe('1 abc')
+    await vm.$el.querySelector('button').click()
+    await nextTick()
+    expect(vm.$el.textContent).toBe('1 abc1')
+  })
+
   // #683 #603 #580
   it('should update directly when adding attributes to a reactive object', async () => {
     const vm = new Vue({