fix: binding context vm when using function without parentheses (#148)

* fix: binding context vm when using function without parentesis #fixes 144

* improve test descriptions

Co-authored-by: Carlos Rodrigues <[email protected]>

Author: pikax

src/setup.ts

@@ -193,6 +193,10 @@ export function mixin(Vue: VueConstructor) {
           if (isReactive(bindingValue)) {
             bindingValue = ref(bindingValue);
           } else {
+            // bind function to the vm, this will make `this` = vm
+            if (isFunction(bindingValue)){
+              bindingValue = bindingValue.bind(vm);
+            }
             // a non-reactive should not don't get reactivity
             bindingValue = ref(markRaw(bindingValue));
           }

test/setup.spec.js

@@ -381,4 +381,46 @@ describe('setup', () => {
       })
       .then(done);
   });
+
+  describe('Methods', () => {
+    it('binds methods when calling with parenthesis', async ()=>{
+      let context = null;
+      const contextFunction = jest.fn(function (){
+        context = this
+      });
+
+      const vm = new Vue({
+        template: '<div><button @click="contextFunction()"/></div>',
+        setup() {
+          return {
+            contextFunction
+          }
+        }
+      }).$mount();
+  
+      await vm.$el.querySelector('button').click();
+      expect(contextFunction).toBeCalled();
+      expect(context).toBe(vm);
+    });
+
+    it('binds methods when calling without parenthesis', async () => {
+      let context = null;
+      const contextFunction = jest.fn(function (){
+        context = this
+      });
+
+      const vm = new Vue({
+        template: '<div><button @click="contextFunction"/></div>',
+        setup() {
+          return {
+            contextFunction
+          }
+        }
+      }).$mount();
+  
+      await vm.$el.querySelector('button').click();
+      expect(contextFunction).toBeCalled();
+      expect(context).toBe(vm);
+    });
+  })
 });