@arrai-innovations/reactive-helpers 5.0.0 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arrai-innovations/reactive-helpers",
-    "version": "5.0.0",
+    "version": "6.0.0",
     "description": "VueJS 3 utility composition functions to help manipulate objects and lists.",
     "main": "index.js",
     "directories": {

package/use/list.js

@@ -3,116 +3,49 @@ import { useListInstance } from "./listInstance";
 import { useListRelated } from "./listRelated";
 import { useListSubscription } from "./listSubscription";
 import { usePagedListInstance } from "./paginatedListInstance";
-import { effectScope, reactive, shallowReactive, shallowReadonly, toRef, watch } from "vue";
+import { reactive, shallowReactive, shallowReadonly, toRef } from "vue";
+
+export const useLists = (listArgs) => {
+    const lists = {};
+    for (const [key, value] of Object.entries(listArgs)) {
+        lists[key] = useList(value);
+    }
+    return lists;
+};
 
 // the big brother of useObject, managing a chain of useList* instances.
-export const useList = ({ props, functions, paged = false, keepOldPages = false, passThroughPropertyNames = [] }) => {
+export const useList = ({ props, functions, paged = false, keepOldPages = false }) => {
     const managed = shallowReactive({
         listInstance: null,
         listSubscription: null,
         listRelated: null,
         listCalculated: null,
     });
-    const es = effectScope();
 
     managed.listInstance = (paged ? usePagedListInstance : useListInstance)({
-        crudArgs: toRef(props, "crudArgs"),
+        props,
         functions,
-        retrieveArgs: toRef(props, "retrieveArgs"),
-        listArgs: toRef(props, "listArgs"),
         keepOldPages,
     });
 
-    const intentPropsWatch = () => {
-        es.run(() => {
-            let nextState = managed.listInstance?.state;
-            // true or false, having a key is intent to use
-            const hasIntendToList = "intendToList" in props;
-            if (hasIntendToList && !managed.listSubscription) {
-                managed.listSubscription = useListSubscription({
-                    listInstance: managed.listInstance,
-                });
-                managed.listSubscription.state.intendToList = toRef(props, "intendToList");
-            } else if (!hasIntendToList && managed.listSubscription) {
-                managed.listSubscription.effectScope.stop();
-                managed.listSubscription = null;
-            }
-            const hasRelatedObjectRules = "relatedObjectsRules" in props;
-            if (hasRelatedObjectRules && !managed.listRelated) {
-                nextState = managed.listSubscription?.state || nextState;
-                managed.listRelated = useListRelated({
-                    parentState: nextState,
-                    relatedObjectsRules: toRef(props, "relatedObjectsRules"),
-                });
-            } else if (!hasRelatedObjectRules && managed.listRelated) {
-                managed.listRelated.effectScope.stop();
-                managed.listRelated = null;
-            }
-            const hasCalculatedObjectRules = "calculatedObjectsRules" in props;
-            if (hasCalculatedObjectRules && !managed.listCalculated) {
-                nextState = managed.listRelated?.state || nextState;
-                managed.listCalculated = useListCalculated({
-                    parentState: nextState,
-                    calculatedObjectsRules: toRef(props, "calculatedObjectsRules"),
-                });
-            } else if (!hasCalculatedObjectRules && managed.listCalculated) {
-                managed.listCalculated.effectScope.stop();
-                managed.listCalculated = null;
-            }
-        });
-    };
+    managed.listSubscription = useListSubscription({
+        listInstance: managed.listInstance,
+    });
+    managed.listSubscription.state.intendToList = toRef(props, "intendToList");
 
-    const exposedState = reactive({});
+    managed.listRelated = useListRelated({
+        parentState: managed.listSubscription.state,
+        relatedObjectsRules: toRef(props, "relatedObjectsRules"),
+    });
 
-    es.run(() => {
-        watch(
-            [
-                //
-                toRef(props, "intendToList"),
-                toRef(props, "relatedObjectsRules"),
-                toRef(props, "calculatedObjectsRules"),
-            ],
-            intentPropsWatch,
-            { immediate: true }
-        );
-        const propertiesToRelay = [
-            "loading",
-            "error",
-            "errored",
-            "objects",
-            "order",
-            "objectsInOrder",
-            "running",
-            "relatedObjects",
-            "calculatedObjects",
-            "totalRecords",
-            "totalPages",
-            "perPage",
-            ...passThroughPropertyNames,
-        ];
-        watch(
-            () =>
-                managed.listCalculated?.state ||
-                managed.listRelated?.state ||
-                managed.listSubscription?.state ||
-                managed.listInstance?.state,
-            (newState, oldState) => {
-                if (newState !== oldState && newState) {
-                    propertiesToRelay.forEach((x) => {
-                        exposedState[x] = toRef(newState, x);
-                    });
-                }
-            },
-            {
-                immediate: true,
-            }
-        );
+    managed.listCalculated = useListCalculated({
+        parentState: managed.listRelated.state,
+        calculatedObjectsRules: toRef(props, "calculatedObjectsRules"),
     });
 
-    return {
+    return reactive({
         // we manage the keys on both of these, so hands off the root.
         managed: shallowReadonly(managed),
-        state: shallowReadonly(exposedState),
-        effectScope: es,
-    };
+        state: managed.listCalculated.state,
+    });
 };

package/use/listCalculated.js

@@ -1,8 +1,18 @@
 import { keyDiff, loadingCombine } from "../utils";
+import { listInstanceStateKeys } from "./listInstance";
+import { listRelatedStateKeys } from "./listRelated";
+import { listSubscriptionStateKeys } from "./listSubscription";
 import { useWatchesRunning } from "./watchesRunning";
 import isEmpty from "lodash-es/isEmpty";
 import { computed, effectScope, onScopeDispose, reactive, toRef, watch } from "vue";
 
+export const listCalculatedStateKeys = [
+    "calculatedObjects",
+    "calculatedObjectsParentStateObjectsWatchRunning",
+    "calculatedObjectsRules",
+    "calculatedObjectsWatchRunning",
+];
+
 export function useListCalculateds(instances, args) {
     for (const [key, value] of Object.entries(args)) {
         useListCalculated({
@@ -15,52 +25,44 @@ export function useListCalculateds(instances, args) {
 // the simpler sibling of useListRelated
 // rules are just keys to functions that will be called with the object
 // and the result will be added as a computed property
-export function useListCalculated({
-    parentState,
-    calculatedObjectsRules,
-    calculatedObjectsPropertyName = "calculatedObjects", // NOT REACTIVE
-    passThroughPropertyNames = ["relatedObjects", "totalRecords", "totalPages", "perPage"], // NOT REACTIVE
-}) {
+export function useListCalculated({ parentState, calculatedObjectsRules }) {
     const state = reactive({
         calculatedObjectsRules,
-        calculatedObjectsObjects: {},
-        parentStateObjectsWatchRunning: false,
+        calculatedObjects: {},
+        calculatedObjectsParentStateObjectsWatchRunning: false,
         calculatedObjectsWatchRunning: false,
     });
     const calculatedObjectsEffectScopes = {};
 
-    // don't change calculatedObjectsPropertyName on us or it will break
-    const copn = calculatedObjectsPropertyName + "";
-
     function parentStateObjectsWatch() {
         const { addedKeys, removedKeys } = keyDiff(
             Object.keys(parentState.objects),
-            Object.keys(state.calculatedObjectsObjects)
+            Object.keys(state.calculatedObjects)
         );
         for (const removedKey of removedKeys) {
-            delete state.calculatedObjectsObjects[removedKey];
+            delete state.calculatedObjects[removedKey];
             if (calculatedObjectsEffectScopes[removedKey]) {
                 calculatedObjectsEffectScopes[removedKey].stop();
                 delete calculatedObjectsEffectScopes[removedKey];
             }
         }
         for (const addedKey of addedKeys) {
-            state.calculatedObjectsObjects[addedKey] = {};
+            state.calculatedObjects[addedKey] = {};
         }
-        state.parentStateObjectsWatchRunning = false;
+        state.calculatedObjectsParentStateObjectsWatchRunning = false;
     }
 
     function calculatedObjectsWatch() {
         const calculatedObjectsRulesIsEmpty = !state.calculatedObjectsRules || isEmpty(state.calculatedObjectsRules);
-        for (const objectKey of Object.keys(state.calculatedObjectsObjects)) {
+        for (const objectKey of Object.keys(state.calculatedObjects)) {
             if (!calculatedObjectsEffectScopes[objectKey]) {
                 calculatedObjectsEffectScopes[objectKey] = effectScope();
             }
             const originalObject = parentState.objects[objectKey];
-            if (!state.calculatedObjectsObjects[objectKey]) {
-                state.calculatedObjectsObjects[objectKey] = {};
+            if (!state.calculatedObjects[objectKey]) {
+                state.calculatedObjects[objectKey] = {};
             }
-            const calculatedObjectsObject = state.calculatedObjectsObjects[objectKey];
+            const calculatedObjectsObject = state.calculatedObjects[objectKey];
             let removedRuleKeys, addedRuleKeys;
             if (!calculatedObjectsRulesIsEmpty) {
                 ({ removedKeys: removedRuleKeys, addedKeys: addedRuleKeys } = keyDiff(
@@ -93,24 +95,20 @@ export function useListCalculated({
     const es = effectScope();
 
     es.run(() => {
-        state.loading = toRef(parentState, "loading");
-        state.errored = toRef(parentState, "errored");
-        state.error = toRef(parentState, "error");
-
-        state.retrieveArgs = toRef(parentState, "retrieveArgs");
-        state.listArgs = toRef(parentState, "listArgs");
-        state.order = toRef(parentState, "order");
-        state.objects = toRef(parentState, "objects");
-        state.objectsInOrder = toRef(parentState, "objectsInOrder");
-        state[copn] = toRef(state, "calculatedObjectsObjects");
-        for (let key of passThroughPropertyNames) {
+        for (const key of listInstanceStateKeys) {
+            state[key] = toRef(parentState, key);
+        }
+        for (const key of listSubscriptionStateKeys) {
+            state[key] = toRef(parentState, key);
+        }
+        for (const key of listRelatedStateKeys) {
             state[key] = toRef(parentState, key);
         }
 
         watch(() => Object.keys(parentState.objects), parentStateObjectsWatch, { immediate: true });
         watch(
             [
-                () => Object.keys(state.calculatedObjectsObjects),
+                () => Object.keys(state.calculatedObjects),
                 () =>
                     state.calculatedObjectsRules
                         ? Object.keys(state.calculatedObjectsRules)
@@ -127,7 +125,7 @@ export function useListCalculated({
                 ),
             ],
             watchSentinelRefs: [
-                toRef(state, "parentStateObjectsWatchRunning"),
+                toRef(state, "calculatedObjectsParentStateObjectsWatchRunning"),
                 toRef(state, "calculatedObjectsWatchRunning"),
             ],
         });

package/use/listInstance.js

@@ -3,7 +3,7 @@ import { getFakeId } from "../utils/getFakeId";
 import inspect from "browser-util-inspect";
 import cloneDeep from "lodash-es/cloneDeep";
 import isFunction from "lodash-es/isFunction";
-import { computed, effectScope, reactive } from "vue";
+import { computed, effectScope, reactive, toRef, watchEffect } from "vue";
 
 export class ListError extends Error {
     constructor(message, code) {
@@ -18,6 +18,22 @@ const defaultCrud = {
     list: undefined,
 };
 
+export const listInstanceStateKeys = [
+    "crud",
+    "retrieveArgs",
+    "listArgs",
+    "objects",
+    "loading",
+    "errored",
+    "error",
+    "objectsInOrder",
+    "order",
+    // when paged
+    "totalRecords",
+    "totalPages",
+    "perPage",
+];
+
 export function setListInstanceCrud({ list, args = {} } = {}) {
     defaultCrud.list = list;
     Object.assign(defaultCrud.args, args);
@@ -31,7 +47,10 @@ export function useListInstances(listInstanceArgs) {
     return instances;
 }
 
-export function useListInstance({ crudArgs, listArgs = {}, retrieveArgs = {}, functions = {} }) {
+export function useListInstance({ props, functions = {} }) {
+    if (!props) {
+        throw new ListError(`useListInstance requires props`);
+    }
     // ### touching the _objectsMap or _objectsProxy directly will not trigger reactivity ###
     const _objectsMap = new Map(); // maps are ordered, if you don't clear lists, you need to insert pages in order.
     // ### touching the _objectsMap or _objectsProxy directly will not trigger reactivity ###
@@ -71,25 +90,28 @@ export function useListInstance({ crudArgs, listArgs = {}, retrieveArgs = {}, fu
             args: {},
             list: undefined,
         },
-        retrieveArgs,
-        listArgs,
+        retrieveArgs: toRef(props, "retrieveArgs"),
+        listArgs: toRef(props, "listArgs"),
         objects: _objectsProxy,
         loading: undefined,
         errored: false,
         error: null,
     });
-    // prevent linking of all instances to the same default .args object
-    Object.assign(state.crud, cloneDeep(defaultCrud));
-    if (crudArgs) {
-        addOrUpdateReactiveObject(state.crud.args, crudArgs);
-    }
-    for (const [key, value] of Object.entries(functions)) {
-        if (isFunction(value) && key in state.crud) {
-            state.crud[key] = value;
-        } else {
-            throw ListError(`Invalid function "${key}" for useListInstance: invalid key or not a function.`);
+    const es = effectScope();
+    watchEffect(() => {
+        // prevent linking of all instances to the same default .args object
+        Object.assign(state.crud, cloneDeep(defaultCrud));
+        if (props.crudArgs) {
+            addOrUpdateReactiveObject(state.crud.args, props.crudArgs);
         }
-    }
+        for (const [key, value] of Object.entries(functions)) {
+            if (isFunction(value) && key in state.crud) {
+                state.crud[key] = value;
+            } else {
+                throw ListError(`Invalid function "${key}" for useListInstance: invalid key or not a function.`);
+            }
+        }
+    });
 
     const defaultPageCallback = (newObjects) => {
         newObjects.forEach((newObject) => {
@@ -191,12 +213,8 @@ export function useListInstance({ crudArgs, listArgs = {}, retrieveArgs = {}, fu
         state.error = null;
     }
 
-    const es = effectScope();
-
-    es.run(() => {
-        state.objectsInOrder = computed(() => Object.values(state.objects));
-        state.order = computed(() => Object.keys(state.objects));
-    });
+    state.objectsInOrder = computed(() => Object.values(state.objects));
+    state.order = computed(() => Object.keys(state.objects));
 
     const returnedObject = {
         state,

package/use/listRelated.js

@@ -1,4 +1,6 @@
 import { keyDiff, loadingCombine } from "../utils";
+import { listInstanceStateKeys } from "./listInstance";
+import { listSubscriptionStateKeys } from "./listSubscription";
 import { useWatchesRunning } from "./watchesRunning";
 import get from "lodash-es/get";
 import isArray from "lodash-es/isArray";
@@ -6,6 +8,13 @@ import isEmpty from "lodash-es/isEmpty";
 import isUndefined from "lodash-es/isUndefined";
 import { computed, effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
 
+export const listRelatedStateKeys = [
+    "relatedObjects",
+    "relatedObjectsRules",
+    "relatedObjectsWatchRunning",
+    "relatedObjectsParentStateObjectsWatchRunning",
+];
+
 export function useListRelateds(instances, args) {
     for (const [key, value] of Object.entries(args)) {
         useListRelated({
@@ -15,45 +24,34 @@ export function useListRelateds(instances, args) {
     }
 }
 
-export function useListRelated({
-    parentState,
-    relatedObjectsRules,
-    relatedObjectsPropertyName = "relatedObjects", // NOT REACTIVE
-    passThroughPropertyNames = ["calculatedObjects", "totalRecords", "totalPages", "perPage"], // NOT REACTIVE
-}) {
+export function useListRelated({ parentState, relatedObjectsRules }) {
     const state = reactive({
         relatedObjectsRules: relatedObjectsRules,
-        relatedObjectsObjects: {},
-        parentStateObjectsWatchRunning: false,
+        relatedObjects: {},
+        relatedObjectsParentStateObjectsWatchRunning: false,
         relatedObjectsWatchRunning: false,
     });
     const relatedObjectsEffectScopes = {};
 
-    // don't change relatedObjectsPropertyName on us or it will break
-    const ropn = relatedObjectsPropertyName + "";
-
     function parentStateObjectsWatch() {
-        const { addedKeys, removedKeys } = keyDiff(
-            Object.keys(parentState.objects),
-            Object.keys(state.relatedObjectsObjects)
-        );
+        const { addedKeys, removedKeys } = keyDiff(Object.keys(parentState.objects), Object.keys(state.relatedObjects));
         for (const removedKey of removedKeys) {
-            delete state.relatedObjectsObjects[removedKey];
+            delete state.relatedObjects[removedKey];
             if (relatedObjectsEffectScopes[removedKey]) {
                 relatedObjectsEffectScopes[removedKey].stop();
                 delete relatedObjectsEffectScopes[removedKey];
             }
         }
         for (const addedKey of addedKeys) {
-            state.relatedObjectsObjects[addedKey] = {};
+            state.relatedObjects[addedKey] = {};
         }
-        state.parentStateObjectsWatchRunning = false;
+        state.relatedObjectsParentStateObjectsWatchRunning = false;
     }
 
     function relatedObjectsWatch() {
         const relatedObjectsRulesIsEmpty = !state.relatedObjectsRules || isEmpty(state.relatedObjectsRules);
-        for (const objectKey of Object.keys(state.relatedObjectsObjects)) {
-            const relatedObjectsObject = state.relatedObjectsObjects[objectKey];
+        for (const objectKey of Object.keys(state.relatedObjects)) {
+            const relatedObjectsObject = state.relatedObjects[objectKey];
             const originalObject = parentState.objects[objectKey];
             let removedRuleKeys, addedRuleKeys;
             if (!relatedObjectsRulesIsEmpty) {
@@ -103,24 +101,17 @@ export function useListRelated({
     const es = effectScope();
 
     es.run(() => {
-        state.loading = toRef(parentState, "loading");
-        state.errored = toRef(parentState, "errored");
-        state.error = toRef(parentState, "error");
-
-        state.retrieveArgs = toRef(parentState, "retrieveArgs");
-        state.listArgs = toRef(parentState, "listArgs");
-        state.order = toRef(parentState, "order");
-        state.objects = toRef(parentState, "objects");
-        state.objectsInOrder = toRef(parentState, "objectsInOrder");
-        state[ropn] = toRef(state, "relatedObjectsObjects");
-        for (let key of passThroughPropertyNames) {
+        for (const key of listInstanceStateKeys) {
+            state[key] = toRef(parentState, key);
+        }
+        for (const key of listSubscriptionStateKeys) {
             state[key] = toRef(parentState, key);
         }
 
         watch(() => Object.keys(parentState.objects), parentStateObjectsWatch, { immediate: true });
         watch(
             [
-                () => Object.keys(state.relatedObjectsObjects),
+                () => Object.keys(state.relatedObjects),
                 () => (state.relatedObjectsRules ? Object.keys(state.relatedObjectsRules) : state.relatedObjectsRules),
             ],
             relatedObjectsWatch,
@@ -134,7 +125,7 @@ export function useListRelated({
                 ),
             ],
             watchSentinelRefs: [
-                toRef(state, "parentStateObjectsWatchRunning"),
+                toRef(state, "relatedObjectsParentStateObjectsWatchRunning"),
                 toRef(state, "relatedObjectsWatchRunning"),
             ],
         });

package/use/listSubscription.js

@@ -1,6 +1,6 @@
 import { loadingCombine } from "../utils/loadingCombine";
 import { useCancellableIntent } from "./cancellableIntent";
-import { useListInstance } from "./listInstance";
+import { listInstanceStateKeys, useListInstance } from "./listInstance";
 import inspect from "browser-util-inspect";
 import cloneDeep from "lodash-es/cloneDeep";
 import isEmpty from "lodash-es/isEmpty";
@@ -18,6 +18,15 @@ const defaultCrud = {
     subscribe: undefined,
 };
 
+export const listSubscriptionStateKeys = [
+    "subscriptionLoading",
+    "subscriptionErrored",
+    "subscriptionError",
+    "intendToList",
+    "intendToSubscribe",
+    "subscribed",
+];
+
 export function setListSubscriptionCrud({ subscribe }) {
     defaultCrud.subscribe = subscribe;
 }
@@ -30,15 +39,17 @@ export function useListSubscriptions(args, listInstances = {}) {
     return subscriptions;
 }
 
-export function useListSubscription({
-    listInstance,
-    crudArgs,
-    listArgs,
-    retrieveArgs,
-    passThroughPropertyNames = ["totalRecords", "totalPages", "perPage"],
-}) {
+export function useListSubscription({ listInstance, props, functions }) {
+    if (!listInstance && !props) {
+        throw new ListSubscriptionError("useListSubscription should be passed listInstance or props and crudArgs.");
+    }
+    if (listInstance && props) {
+        throw new ListSubscriptionError(
+            "useListSubscription should be passed listInstance or props and crudArgs, not both."
+        );
+    }
     if (!listInstance) {
-        listInstance = useListInstance({ crudArgs, listArgs, retrieveArgs });
+        listInstance = useListInstance({ props, functions });
     }
     if (!listInstance.state.crud.subscribe) {
         listInstance.state.crud.subscribe = defaultCrud.subscribe;
@@ -152,12 +163,7 @@ export function useListSubscription({
         state.errored = computed(() => parentState.errored || state.subscriptionErrored);
         state.error = computed(() => parentState.error || state.subscriptionError);
 
-        state.retrieveArgs = computed(() => parentState.retrieveArgs);
-        state.listArgs = computed(() => parentState.listArgs);
-        state.objects = toRef(parentState, "objects");
-        state.order = toRef(parentState, "order");
-        state.objectsInOrder = toRef(parentState, "objectsInOrder");
-        for (let key of passThroughPropertyNames) {
+        for (const key of listInstanceStateKeys.filter((key) => !["loading", "errored", "error"].includes(key))) {
             state[key] = toRef(parentState, key);
         }
 

package/use/object.js

@@ -2,11 +2,11 @@ import { useObjectCalculated } from "./objectCalculated";
 import { useObjectInstance } from "./objectInstance";
 import { useObjectRelated } from "./objectRelated";
 import { useObjectSubscription } from "./objectSubscription";
-import { reactive, shallowReactive, shallowReadonly, toRef } from "vue";
+import { reactive, shallowReadonly, toRef } from "vue";
 
 // Manages a chain of useObject* functions
 export const useObject = ({ props, functions }) => {
-    const managed = shallowReactive({
+    const managed = reactive({
         objectInstance: null,
         objectSubscription: null,
         objectRelated: null,
@@ -32,8 +32,8 @@ export const useObject = ({ props, functions }) => {
         parentState: managed.objectRelated.state,
         calculatedObjectRules: toRef(props, "calculatedObjectRules"),
     });
-    return shallowReactive({
+    return reactive({
         managed: shallowReadonly(managed),
-        state: reactive(managed.objectCalculated.state),
+        state: managed.objectCalculated.state,
     });
 };

package/use/objectCalculated.js

@@ -121,10 +121,10 @@ export function useObjectCalculated({
             }
         });
     });
-    return {
+    return reactive({
         state,
         parentState,
         watchesRunning,
         effectScope: es,
-    };
+    });
 }

package/use/objectInstance.js

@@ -1,7 +1,7 @@
 import { addOrUpdateReactiveObject, assignReactiveObject } from "../utils";
 import cloneDeep from "lodash-es/cloneDeep";
 import isFunction from "lodash-es/isFunction";
-import { reactive, shallowReactive, toRef } from "vue";
+import { reactive, toRef } from "vue";
 
 export class ObjectError extends Error {
     constructor(message) {
@@ -222,7 +222,7 @@ export function useObjectInstance({ props, functions = {} }) {
         state.error = null;
     }
 
-    return shallowReactive({
+    return reactive({
         state,
         retrieve,
         create,

package/use/objectRelated.js

@@ -119,10 +119,10 @@ export function useObjectRelated({
         });
     });
 
-    return {
+    return reactive({
         state,
         parentState,
         watchesRunning,
         effectScope: es,
-    };
+    });
 }

package/use/objectSubscription.js

@@ -1,7 +1,7 @@
 import { assignReactiveObject, loadingCombine } from "../utils";
 import { useCancellableIntent } from "./cancellableIntent";
 import { useObjectInstance } from "./objectInstance";
-import { computed, effectScope, reactive, shallowReactive, toRef } from "vue";
+import { computed, effectScope, reactive, toRef } from "vue";
 
 export class ObjectSubscriptionError extends Error {
     constructor(message) {
@@ -191,7 +191,7 @@ export function useObjectSubscription({
         });
     });
 
-    return shallowReactive({
+    return reactive({
         state,
         objectInstance,
         subscribeIntent,

package/utils/debugWatch.js

@@ -5,7 +5,7 @@ import { deepUnref } from "vue-deepunref";
 
 export const debugWatch = (target, name) => {
     return watch(
-        target,
+        () => deepUnref(target),
         (newState, oldState) => {
             console.log(`Watch triggered ${name}`);
             const diff = keyDiff(Object.keys(newState || {}), Object.keys(oldState || {}));