fix: The behavior of development and production merge should be consistent. (#694)

Co-authored-by: Anthony Fu <[email protected]>

Author: ygj6

src/utils/instance.ts

@@ -47,7 +47,12 @@ export function asVmProperty(
             },
           })
         } else {
-          vm._data[propName] = propValue
+          proxy(vm._data, propName, {
+            get: () => propValue,
+            set: (val: any) => {
+              propValue = val
+            },
+          })
         }
       })
     }

test/setup.spec.js

@@ -898,6 +898,50 @@ describe('setup', () => {
     expect(vm.$el.textContent).toBe('2')
   })
 
+  // #679
+  it('should work merge with object in development', async () => {
+    global.__DEV__ = true
+    const vm = new Vue({
+      template: '<div>{{ data.id }}</div>',
+      setup() {
+        const data = reactive({
+          id: 42,
+        })
+        return { data }
+      },
+      data() {
+        return {
+          data: { id: 1 },
+        }
+      },
+    }).$mount()
+
+    await nextTick()
+    expect(vm.$el.textContent).toBe('1')
+  })
+
+  // #679
+  it('should work merge with object in production', async () => {
+    global.__DEV__ = false
+    const vm = new Vue({
+      template: '<div>{{ data.id }}</div>',
+      setup() {
+        const data = reactive({
+          id: 42,
+        })
+        return { data }
+      },
+      data() {
+        return {
+          data: { id: 1 },
+        }
+      },
+    }).$mount()
+
+    await nextTick()
+    expect(vm.$el.textContent).toBe('1')
+  })
+
   // #683 #603 #580
   it('should update directly when adding attributes to a reactive object', async () => {
     const vm = new Vue({