title: Observable array mobx doesn't update when the array starting empty
body: <p>I have an empty observable array (that will containing object with key 'id' and 'val') in my store (let say myStore)</p>
  
  <pre><code>@observable 
  var myArray = [];
  </code></pre>
  
  <p>then I have a function in myStore</p>
  
  <pre><code>@action
  addItem(item){ //item = { id : 'id1' , val : 123}
     myArray.push(item);
  }
  
  @computed
  get getmyArray{
     return myArray;
  }
  </code></pre>
  
  <p>Now the problem is, when I push item to myArray, my component that Observe myArray <strong>doesn't re-render</strong>. So, I want to render each element from myArray. Like this</p>
  
  <pre><code>renderList = () =&gt; {
      const store = this.props.myStore;
  
      var list = [];
  
      for(var index in store.getmyArray){
          list.push(
                  &lt;li key = {store.getmyArray[index].id}&gt;
                      {store.getmyArray[index].id + " ===&gt; " + store.getmyArray[index].val} 
                  &lt;/li&gt; 
          );  
      }
  
      return (
          &lt;ul className = "curr-list"&gt;
              {list}
          &lt;/ul&gt;
      );
  
  }
  </code></pre>
  
  <p>And the thing is, those codes were running just fine if I have some initial elements when I declare myArray, but it won't re-render again if I delete all the elements from myArray, then push some item again to it.</p>
  
  <p>So,</p>
  
  <ol>
  <li>My component doesn't re-render when myArray empty, then push an item to it. (When I console.log(myArray), the item is there in myArray, my component just doesn't re-render )</li>
  <li>My component doesn't re-render when myArray have some initial elements, then I delete all elements, then I push again to myArray (when I delete and add element to myArray, as long as it's not empty, my component re-render just fine).</li>
  </ol>
  
  <p>Any clue why ?</p>