title: MobX + React - Getting observable to re-render within an external component
body: <p>I have been playing around with MobX + React + React Sortable Hoc ( <a href="https://github.com/clauderic/react-sortable-hoc" rel="nofollow">https://github.com/clauderic/react-sortable-hoc</a> )</p>
  
  <p>And I am unable to add a new item to the sortable list dynamically and make it appear straight away. If you click on the "Add another one" button a few times to push new items to the list, and then re-order an item in the list, only then does the list get updated to show all the items:</p>
  
  <p><a href="https://jsfiddle.net/56s57ryb/" rel="nofollow">https://jsfiddle.net/56s57ryb/</a></p>
  
  <p>Using this as the store:</p>
  
  <pre><code>let appState = mobx.observable({
      todos: [ 'yellow', 'blue', 'red' ]
  })
  
  appState.addTodo = function() {
      appState.todos.push( 'new one' )
  }
  </code></pre>
  
  <p>I've been going around in circles for ages and searched the internet up and down but I can't seem to pinpoint where I'm going wrong. Does anyone know what is going on?</p>