e3d
diff --git a/‎src/setup.ts
Lines changed: 10 additions & 2 deletions b/‎src/setup.ts
Lines changed: 10 additions & 2 deletions
diff --git a/‎src/utils.ts
Lines changed: 4 additions & 0 deletions b/‎src/utils.ts
Lines changed: 4 additions & 0 deletions
diff --git a/‎test/setup.spec.js
Lines changed: 41 additions & 0 deletions b/‎test/setup.spec.js
Lines changed: 41 additions & 0 deletions
@@ -2,7 +2,8 @@ import { VueConstructor } from 'vue';
 import { Context } from './types/vue';
 import { isWrapper } from './helper';
 import { setCurrentVM } from './runtimeContext';
-import { isPlainObject, assert, proxy } from './utils';
+import { isPlainObject, assert, proxy, isFunction } from './utils';
+import { value } from './functions/state';
 
 export function mixin(Vue: VueConstructor) {
   Vue.mixin({
@@ -56,7 +57,14 @@ export function mixin(Vue: VueConstructor) {
     }
 
     Object.keys(binding).forEach(name => {
-      const bindingValue = binding[name];
+      let bindingValue = binding[name];
+      if (bindingValue === undefined)
+        return;
+      // make plain value reactive
+      if (!isWrapper(bindingValue) && !isFunction(bindingValue) && !Object.isFrozen(bindingValue)) {
+        bindingValue = value(bindingValue);
+      }
+      // bind to vm
       if (isWrapper(bindingValue)) {
         bindingValue.setVmProperty(vm, name);
       } else {
 
@@ -33,3 +33,7 @@ export function isArray<T>(x: unknown): x is T[] {
 export function isPlainObject<T extends Object = {}>(x: unknown): x is T {
   return toString(x) === '[object Object]';
 }
+
+export function isFunction(x: unknown): x is Function {
+  return typeof x === 'function';
+}
@@ -236,4 +236,45 @@ describe('setup', () => {
       },
     }).$mount();
   });
+
+  it('should make returned plain value reactive (value)', done => {
+    const vm = new Vue({
+      setup() {
+        return {
+          name: null,
+          nested: {
+            object: {
+              msg: 'foo'
+            }
+          },
+        };
+      },
+      template: '<div>{{ name }}, {{ nested.object.msg }}</div>',
+    }).$mount();
+    expect(vm.$el.textContent).toBe(', foo');
+    vm.name = 'foo';
+    vm.nested.object.msg = 'bar';
+    waitForUpdate(() => {
+      expect(vm.$el.textContent).toBe('foo, bar');
+    }).then(done);
+  })
+
+  it('should make returned plain value reactive (object)', done => {
+    const vm = new Vue({
+      setup() {
+        return {
+          form: {
+            a: 1,
+            b: 2
+          }
+        };
+      },
+      template: '<div>{{ form.a }}, {{ form.b }}</div>',
+    }).$mount();
+    expect(vm.$el.textContent).toBe('1, 2');
+    vm.form = { a: 2, b: 3 };
+    waitForUpdate(() => {
+      expect(vm.$el.textContent).toBe('2, 3');
+    }).then(done);
+  })
 });
Original file line number	Diff line number	Diff line change
`@@ -33,3 +33,7 @@ export function isArray<T>(x: unknown): x is T[] {`
`33`	`33`	`export function isPlainObject<T extends Object = {}>(x: unknown): x is T {`
`34`	`34`	`return toString(x) === '[object Object]';`
`35`	`35`	`}`
	`36`	`+`
	`37`	`+export function isFunction(x: unknown): x is Function {`
	`38`	`+ return typeof x === 'function';`
	`39`	`+}`