title: How to track nested object in a MobX store
body: <p>Let's stay I have this myObject loaded via an API call:</p>
  
  <pre><code>myObject = {
    fieldA: { details: 'OK', message: 'HELLO' },
    fieldB: { details: 'NOT_OK', message: 'ERROR' },
  }
  </code></pre>
  
  <p>Only details and message of each field can change. I want this object to be observable in a MobX store (which properties? to be defined below). I have a simple React component which reads the two fields from the store:</p>
  
  <pre><code>@observer
  class App extends Component {
    store = new Store();
  
    componentWillMount() {
      this.store.load();
    }
  
    render() {
      return (
        &lt;div&gt;
          {this.store.fieldA &amp;&amp; &lt;p&gt;{this.store.fieldA.details}&lt;/p&gt;}
          {this.store.fieldB &amp;&amp; &lt;p&gt;{this.store.fieldB.details}&lt;/p&gt;}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I read <a href="https://mobx.js.org/best/react.html" rel="noreferrer">this page</a> trying to understand what MobX reacts to, but still didn't get a clear idea. Specifically, which of the 4 stores below would work, and why?</p>
  
  <p>1/</p>
  
  <pre><code>class Store1 = {
    @observable myObject = {};
  
    @action setMyObject = object =&gt; {
      this.myObject = object;
    }
  
    load = () =&gt; someAsyncStuff().then(this.setMyObject);
  }
  </code></pre>
  
  <p>2/</p>
  
  <pre><code>class Store2 = {
    @observable myObject = {};
  
    @action setMyObject = object =&gt; {
      this.myObject.fieldA = object.fieldA;
      this.myObject.fieldB = object.fieldB;
    }
  
    load = () =&gt; someAsyncStuff().then(this.setMyObject);
  }
  </code></pre>
  
  <p>3/</p>
  
  <pre><code>class Store3 = {
    @observable myObject = { fieldA: {}, fieldB: {} };
  
    @action setMyObject = object =&gt; {
      this.myObject = object;
    }
  
    load = () =&gt; someAsyncStuff().then(this.setMyObject);
  }
  </code></pre>
  
  <p>4/</p>
  
  <pre><code>class Store4 = {
    @observable myObject = { fieldA: {}, fieldB: {} };
  
    @action setMyObject = object =&gt; {
      this.myObject.fieldA = object.fieldA;
      this.myObject.fieldB = object.fieldB;
    }
  
    load = () =&gt; someAsyncStuff().then(this.setMyObject);
  }
  </code></pre>