title: Update a MobX nested observable.map property
body: <p>There is a simplified store with an <code>observable.map</code>:</p>
  
  <pre><code>class ThStore {
      constructor() {
          this.store = mobx.observable.map({});
      }
  }
  
  mobx.decorate(ThStore, {
      _store: mobx.observable,
  }
  </code></pre>
  
  <p>The store holds data with this format (abbreviated), it is a javascript object literal that is managed by <code>mobx</code> as an <code>observable.map</code>. The data itself is a collection of items keyed with its <code>id</code> that has some nested child collection with the same format:</p>
  
  <pre><code> {
      "some-id": {
          id:"some-id",
          label:"some-value",
          childs: {
               "child-id": {...some properties},
               "other-child-id": {...some properties},
          }
      },
      "other-id": {
          id:"other-id",
          label:"other-value",
          childs: {
               ...
          }
      }
  }
  </code></pre>
  
  <p>A change in a whole entry in the store works as expected</p>
  
  <pre><code>storeInstance.store.set("some-id", newItem);
  </code></pre>
  
  <p>But I cannot find a way to update only a property of an item. Getting an item gives a Proxy object which I don't know how to use to update some of its properties.</p>
  
  <pre><code>const item = storeInstance.store.get("childs");
  // item is a Proxy instance and has no `.get` method to retrive a child
  </code></pre>
  
  <p>Trying to update the item like this works, but forces to update all the item and not just the required property triggering more re-renders than necesary.</p>
  
  <pre><code>const copiedItem = mobx.toJS(storeInstance.store.get("some-id"));
  
  // This change does not trigger mobx 
  copiedItem.child["child-id"].property = someValue;
  
  // This change does but forces updating all the item
  storeInstance.set("some-id", copiedItem);
  </code></pre>
  
  <p>So I don't know how to do fine grainned updates to a <code>mobX</code> store using <code>observable.map</code> with nested child maps.</p>
  
  <p><strong>EDIT</strong>: the problem is that the nested <code>childs</code> property is not converted to an <code>observable.map</code> by <code>mobx</code> but is left as a plain object. How can be the nested property be forced to be converted to <code>observable.map</code>?</p>