feat(useVModel): Set to throw error if current instance is undefined (#819)

linked: #818

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

Author: nandi95

packages/vue-composable/__tests__/misc/vmodel.spec.ts

@@ -13,7 +13,7 @@ describe("vmodel", () => {
   it("should work", async () => {
     const comp1 = {
       props: {
-        test: String
+        test: String,
       },
       setup(props: { test: string }) {
         const testModel = useVModel(props, "test");
@@ -23,24 +23,24 @@ describe("vmodel", () => {
         });
 
         return {
-          testModel
+          testModel,
         };
       },
-      template: `<p>{{testModel}}</p>`
+      template: `<p>{{testModel}}</p>`,
     };
 
     const test = ref("propTest");
 
     const vm = createVue({
       components: {
-        comp1
+        comp1,
       },
       template: `<comp1 v-model:test="test" />`,
       setup() {
         return {
-          test
+          test,
         };
-      }
+      },
     });
 
     expect(test.value).toBe("propTest");
@@ -53,7 +53,7 @@ describe("vmodel", () => {
   it("should replace prop", async () => {
     const comp1 = {
       props: {
-        test: String
+        test: String,
       },
       setup(props: { test: string }) {
         const test = useVModel(props, "test");
@@ -63,24 +63,24 @@ describe("vmodel", () => {
         });
 
         return {
-          test
+          test,
         };
       },
-      template: `<p>{{test}}</p>`
+      template: `<p>{{test}}</p>`,
     };
 
     const test = ref("propTest");
 
     const vm = createVue({
       components: {
-        comp1
+        comp1,
       },
       template: `<comp1 v-model:test="test" />`,
       setup() {
         return {
-          test
+          test,
         };
-      }
+      },
     });
 
     expect(test.value).toBe("propTest");
@@ -90,8 +90,11 @@ describe("vmodel", () => {
     expect(test.value).toBe("mounted");
   });
 
-  it("should return empty ref if called outside setup", () => {
-    const r = useVModel({ a: 10 }, "a");
-    expect(r.value).toBeUndefined();
+  it("should throw an error if the method not called in the setup or lifecycle hook", () => {
+    expect(() => useVModel({ myProp: 1 }, "myProp")).toThrow(
+      new Error(
+        "useVModel must be called from the setup or lifecycle hook methods."
+      )
+    );
   });
 });

packages/vue-composable/src/misc/vmodel.ts

@@ -1,4 +1,4 @@
-import { ref, Ref, computed, getCurrentInstance } from "../api";
+import { Ref, computed, getCurrentInstance } from "../api";
 
 export function useVModel<TProps, PropName extends keyof TProps>(
   props: TProps,
@@ -13,15 +13,18 @@ export function useVModel(props: Record<string, any>, name: string): Ref<any> {
 
   const instance = getCurrentInstance();
   if (!instance) {
-    return ref() as any;
+    throw new Error(
+      "useVModel must be called from the setup or lifecycle hook methods."
+    );
   }
+
   return computed({
     get() {
       return props[name];
     },
     set(v) {
       // @ts-ignore when building v2 the instance doesn't have `emit`
       instance.emit(`update:${name}`, v);
-    }
+    },
   });
 }