title: Components not reacting to nested mobx stores
body: <p>I'm rendering a square based off a nested store (<code>SquareModel</code>) in MobX. When the square is clicked I would like an action to fire within <code>SquareModel</code>, changing a <code>selected</code> property which would, in turn, resize the square. However, I can't seem to get the square to react to the property change. Any ideas on how to get this working?</p>
  
  <p>Sandbox: <a href="https://codesandbox.io/s/m51oyzz069" rel="nofollow noreferrer">https://codesandbox.io/s/m51oyzz069</a></p>
  
  <p>MainStore:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { observable, decorate } from "mobx";
  import SquareModel from "./SquareModel";
  
  class MobXStore {
    square = new SquareModel();
  }
  
  decorate(MobXStore, {
    square: observable
  });
  
  export default new MobXStore();
  </code></pre>
  
  <p>NestedStore:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { observable, action, decorate } from "mobx";
  
  class SquareModel {
    selected = false;
    toggleSelection() {
      console.log("toggle selection");
      this.selected = !this.selected;
    }
  }
  
  decorate(SquareModel, {
    selected: observable,
    toggleSelection: action
  });
  
  export default SquareModel;
  
  </code></pre>
  
  <p>React:</p>
  
  <pre class="lang-js prettyprint-override"><code>const App = observer(() =&gt; {
    return (
      &lt;svg className="App"&gt;
        &lt;svg x={100} y={100}&gt;
          &lt;Square
            unit={MobXStore.square.selected ? 2 : 1}
            onPointerUp={MobXStore.square.toggleSelection}
          /&gt;
        &lt;/svg&gt;
      &lt;/svg&gt;
    );
  });
  
  export const Square = observer(({ unit, ...props }) =&gt; {
    console.log("render square");
    return (
      &lt;g {...props}&gt;
        &lt;rect height={unit * 50} width={unit * 50} style={{ fill: "blue" }} /&gt;
      &lt;/g&gt;
    );
  });
  </code></pre>