mobx-vue-bridge 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-vue-bridge",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A lightweight bridge for seamless two-way data binding between MobX observables and Vue 3 reactivity",
   "main": "src/mobxVueBridge.js",
   "module": "src/mobxVueBridge.js",

package/src/mobxVueBridge.js

@@ -214,17 +214,27 @@ export function useMobxBridge(mobxObject, options = {}) {
    * array operations like shift(), unshift(), splice() which modify multiple indices.
    * This ensures data correctness at the cost of a microtask delay.
    * 
+   * IMPORTANT: The proxy wraps the value stored in propertyRefs[prop].value, which is
+   * a clone. When nested mutations occur, we update the clone in-place, then trigger
+   * a sync back to MobX by re-assigning the entire cloned structure.
+   * 
    * @param {object|array} value - The nested value to wrap in a proxy
-   * @param {string} prop - The parent property name for error messages
+   * @param {string} prop - The parent property name for error messages and sync
+   * @param {function} getRoot - Function that returns the current root value from propertyRef
    * @returns {Proxy} Proxied object/array with reactive mutation handling
    */
-  const createDeepProxy = (value, prop) => {
+  const createDeepProxy = (value, prop, getRoot = null) => {
     // Don't proxy built-in objects that should remain unchanged
     if (value instanceof Date || value instanceof RegExp || value instanceof Map || 
         value instanceof Set || value instanceof WeakMap || value instanceof WeakSet) {
       return value;
     }
 
+    // If no getRoot provided, use the default which gets from propertyRefs
+    if (!getRoot) {
+      getRoot = () => propertyRefs[prop].value;
+    }
+
     // Track pending updates to batch array mutations
     let updatePending = false;
     
@@ -235,7 +245,7 @@ export function useMobxBridge(mobxObject, options = {}) {
         if (result && typeof result === 'object' && 
             !(result instanceof Date || result instanceof RegExp || result instanceof Map || 
               result instanceof Set || result instanceof WeakMap || result instanceof WeakSet)) {
-          return createDeepProxy(result, prop);
+          return createDeepProxy(result, prop, getRoot);
         }
         return result;
       },
@@ -243,9 +253,10 @@ export function useMobxBridge(mobxObject, options = {}) {
         // Check if direct mutation is allowed
         if (!allowDirectMutation) {
           warnDirectMutation(`${prop}.${String(key)}`);
-          return false;
+          return true; // Must return true to avoid TypeError in strict mode
         }
         
+        // Update the target in-place (this modifies the clone in propertyRefs[prop].value)
         target[key] = val;
         
         // Batch updates to avoid corrupting in-progress array operations
@@ -254,12 +265,21 @@ export function useMobxBridge(mobxObject, options = {}) {
           updatePending = true;
           queueMicrotask(() => {
             updatePending = false;
+            // The root value has already been modified in-place above (target[key] = val)
+            // Now we need to trigger Vue reactivity and sync to MobX
+            
+            // Clone the root to create a new reference for Vue reactivity
+            // This ensures Vue detects the change
+            const rootValue = getRoot();
+            const cloned = clone(rootValue);
+            
             // Update the Vue ref to trigger reactivity
-            propertyRefs[prop].value = clone(propertyRefs[prop].value);
-            // Update MobX immediately
+            propertyRefs[prop].value = cloned;
+            
+            // Update MobX immediately with the cloned value
             updatingFromVue.add(prop);
             try {
-              mobxObject[prop] = clone(propertyRefs[prop].value);
+              mobxObject[prop] = cloned;
             } finally {
               updatingFromVue.delete(prop);
             }