Keep properties reactive when a model gets instrumented by Vue mid-constructor.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "firetruss",
-  "version": "7.8.4",
+  "version": "7.8.5",
   "description": "Advanced data sync layer for Firebase and Vue.js",
   "scripts": {
     "update": "yarn up -R '*' && yarn dedupe --strategy highest",

src/Modeler.js

@@ -448,8 +448,12 @@ export default class Modeler {
   _wrapProperties(object) {
     _.forEach(object, (value, key) => {
       const valueKey = '$_' + key;
+      const descriptor = Object.getOwnPropertyDescriptor(object, key);
+      const valueDescriptor = descriptor.get && descriptor.set ? {
+        get: descriptor.get, set: descriptor.set, configurable: true
+      } : {value, writable: true};
       Object.defineProperties(object, {
-        [valueKey]: {value, writable: true},
+        [valueKey]: valueDescriptor,
         [key]: {
           get: () => object[valueKey],
           set: arg => {object[valueKey] = arg; angular.digest();},
@@ -571,7 +575,6 @@ export default class Modeler {
   }
 
   isLocal(path, value) {
-    // eslint-disable-next-line no-shadow
     const mount = this._getMount(path, false, mount => mount.local);
     if (mount && mount.local) return true;
     if (this._hasLocalProperties(mount, value)) {

src/Modeler.test.js

@@ -58,6 +58,21 @@ class SubrootFoo {
   static get $trussMount() {return '/sub/foo';}
 }
 
+let earlyObserver;
+
+class EarlyObservedRoot {
+  static get $trussMount() {return '/';}
+
+  constructor() {
+    earlyObserver = new Vue({data: {scope: this}});
+    Vue.set(this, 'source', undefined);
+  }
+
+  get derived() {
+    return this.source;
+  }
+}
+
 test.beforeEach(t => {
   t.context = {
     rootUrl: 'https://example.firebaseio.com',
@@ -72,6 +87,10 @@ test.beforeEach(t => {
 
 test.afterEach(t => {
   t.context.tree.destroy();
+  if (earlyObserver) {
+    earlyObserver.$destroy();
+    earlyObserver = null;
+  }
 });
 
 test('initialize placeholders', t => {
@@ -110,3 +129,48 @@ test('computing non-primitive values', t => {
     tree.checkVueObject(tree.root, '/');
   });
 });
+
+test('wrapping observed properties preserves missing child dependencies', t => {
+  const tree = t.context.tree;
+  const context = {};
+  const navigation = {context};
+  const vue = new Vue({data: {navigation}});
+
+  tree._modeler._wrapProperties(navigation);
+  t.true(Object.hasOwn(navigation, '$_context'));
+
+  let review;
+  const unwatch = vue.$watch(() => navigation.context.review, value => {
+    review = value;
+  }, {immediate: true});
+  t.is(review, undefined);
+
+  Vue.set(context, 'review', {ready: true});
+  return Vue.nextTick().then(() => {
+    t.deepEqual(review, {ready: true});
+    unwatch();
+    vue.$destroy();
+  });
+});
+
+test('computed properties added after observation remain reactive', t => {
+  const tree = new Tree(
+    t.context.truss, t.context.rootUrl, t.context.bridge, t.context.dispatcher);
+  tree.init([EarlyObservedRoot]);
+  const root = tree.root;
+
+  let observed;
+  const unwatch = tree._vue.$watch(() => {
+    root.$$touchThis();
+    return root.derived && root.derived.child;
+  }, value => {
+    observed = value;
+  }, {immediate: true});
+
+  Vue.set(root, 'source', {child: 1});
+  return Vue.nextTick().then(() => {
+    t.is(observed, 1);
+    unwatch();
+    tree.destroy();
+  });
+});

src/Tree.js

@@ -338,10 +338,25 @@ export default class Tree {
 
     const object = this._modeler.createObject(path, properties);
     this._modeler.emitLifecycleHook(object, 'beforeCreate');
-    Object.defineProperties(object, properties);
+    this._defineObjectProperties(object, properties);
     return object;
   }
 
+  _defineObjectProperties(object, properties) {
+    const observer = object.__ob__;
+    Object.defineProperties(object, properties);
+    if (!observer) return;
+
+    let addedReactiveProperties = false;
+    for (const key of _.keys(properties)) {
+      const descriptor = Object.getOwnPropertyDescriptor(object, key);
+      if (!descriptor.configurable || !descriptor.enumerable) continue;
+      Vue.util.defineReactive(object, key);
+      addedReactiveProperties = true;
+    }
+    if (addedReactiveProperties) observer.dep.notify();
+  }
+
   // To be called on the result of _createObject after it's been inserted into the _vue hierarchy
   // and Vue has had a chance to initialize it.
   _fixObject(object) {
@@ -728,4 +743,3 @@ export function toFirebaseJson(object) {
   }
   return result;
 }
-