test: test for options API

packages/runtime-core/src/apiOptions.ts

@@ -28,7 +28,7 @@ import {
   onBeforeUnmount,
   onUnmounted
 } from './apiLifecycle'
-import { DebuggerEvent } from '@vue/reactivity'
+import { DebuggerEvent, reactive } from '@vue/reactivity'
 import { warn } from './warning'
 
 // TODO legacy component definition also supports constructors with .options
@@ -83,7 +83,7 @@ export function applyOptions(
   asMixin: boolean = false
 ) {
   const data =
-    instance.data === EMPTY_OBJ ? (instance.data = {}) : instance.data
+    instance.data === EMPTY_OBJ ? (instance.data = reactive({})) : instance.data
   const ctx = instance.renderProxy as any
   const {
     // composition
@@ -135,7 +135,13 @@ export function applyOptions(
   }
   if (computedOptions) {
     for (const key in computedOptions) {
-      data[key] = computed(computedOptions[key] as any)
+      const opt = computedOptions[key]
+      data[key] = isFunction(opt)
+        ? computed(opt.bind(ctx))
+        : computed({
+            get: opt.get.bind(ctx),
+            set: opt.set.bind(ctx)
+          })
     }
   }
   if (methods) {
@@ -148,9 +154,9 @@ export function applyOptions(
       const raw = watchOptions[key]
       const getter = () => ctx[key]
       if (isString(raw)) {
-        const handler = data[key]
+        const handler = data[raw]
         if (isFunction(handler)) {
-          watch(getter, handler.bind(ctx))
+          watch(getter, handler as any)
         } else if (__DEV__) {
           // TODO warn invalid watch handler path
         }

packages/runtime-core/src/component.ts

@@ -337,7 +337,7 @@ export function setupStatefulComponent(instance: ComponentInstance) {
       // setup returned bindings.
       // assuming a render function compiled from template is present.
       if (isObject(setupResult)) {
-        instance.data = setupResult
+        instance.data = reactive(setupResult)
       } else if (__DEV__ && setupResult !== undefined) {
         warn(
           `setup() should return an object. Received: ${
@@ -360,7 +360,9 @@ export function setupStatefulComponent(instance: ComponentInstance) {
   if (__FEATURE_OPTIONS__) {
     applyOptions(instance, Component)
   }
-  instance.data = reactive(instance.data === EMPTY_OBJ ? {} : instance.data)
+  if (instance.data === EMPTY_OBJ) {
+    instance.data = reactive({})
+  }
   currentInstance = null
 }