wip: defineReactive on instance with keys starting with $

diff --git a/packages/runtime-core/src/compat/global.ts b/packages/runtime-core/src/compat/global.ts
index 9f353d414d82cef49574edd28aab24d3a5b67068..24667066500f89e560a0ba719a9f45a48fe3d7a6 100644 (file)
--- a/packages/runtime-core/src/compat/global.ts
+++ b/packages/runtime-core/src/compat/global.ts
@@ -11,7 +11,6 @@ import {
   isFunction,
   extend,
   NOOP,
-  EMPTY_OBJ,
   isArray,
   isObject,
   isString,
@@ -557,11 +556,8 @@ function defineReactive(obj: any, key: string, val: any) {
 
   const i = obj.$
   if (i && obj === i.proxy) {
-    // Vue instance, add it to data
-    if (i.data === EMPTY_OBJ) {
-      i.data = reactive({})
-    }
-    i.data[key] = val
+    // target is a Vue instance - define on instance.ctx
+    defineReactiveSimple(i.ctx, key, val)
     i.accessCache = Object.create(null)
   } else if (isReactive(obj)) {
     obj[key] = val

diff --git a/packages/vue-compat/__tests__/global.spec.ts b/packages/vue-compat/__tests__/global.spec.ts
index 3cd2c9a18df9d1396b3fbf1416023d8b6dade572..02d578772b79e9a02183b470e7db403bbf992fe6 100644 (file)
--- a/packages/vue-compat/__tests__/global.spec.ts
+++ b/packages/vue-compat/__tests__/global.spec.ts
@@ -360,6 +360,20 @@ describe('GLOBAL_PRIVATE_UTIL', () => {
     expect(vm.$el.textContent).toBe('2')
   })
 
+  test('defineReactive on instance with key that starts with $', async () => {
+    const vm = new Vue({
+      beforeCreate() {
+        // @ts-ignore
+        Vue.util.defineReactive(this, '$foo', 1)
+      },
+      template: `<div>{{ $foo }}</div>`
+    }).$mount() as any
+    expect(vm.$el.textContent).toBe('1')
+    vm.$foo = 2
+    await nextTick()
+    expect(vm.$el.textContent).toBe('2')
+  })
+
   test('defineReactive with object value', () => {
     const obj: any = {}
     const val = { a: 1 }