diff --git a/src/utils/instance.ts b/src/utils/instance.ts index 5fa4e4b7..5abfa75e 100644 --- a/src/utils/instance.ts +++ b/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 + }, + }) } }) } diff --git a/test/setup.spec.js b/test/setup.spec.js index 2bcbe442..e1ac9a6d 100644 --- a/test/setup.spec.js +++ b/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: '
{{ data.id }}
', + 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: '
{{ data.id }}
', + 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({