wip: defineReactive on instance with keys starting with $

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

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 }