title: Ember updating array does not update template
body: <p>I'm going mad with this problem:
  I have a component with a template that uses a {{#each}} loop to iterate an array of comments;</p>
  
  <pre><code>comments: Ember.computed('commentsModel', function() {
      return this.get('commentsModel').toArray();
  }),
  
  actions: {
      addOne: function() {
          this.set('comments', [{content: 'agent k'}]);
      }
  }
  </code></pre>
  
  <p>The component is called like this:</p>
  
  <pre><code>{{photo-comments commentsModel=model.comments}}
  </code></pre>
  
  <p>Where model.comments is returned by the model hook of the route;
  When I click the button that triggers "addOne" event, the template updates correctly, all the comments are removed and only the new comment "agent k" is shown;</p>
  
  <p>but if I want to ADD a comment into the comments array, instead of overwriting the whole array, it doesn't work;
  I get no errors but the template simply ignores it and does not updates!</p>
  
  <p>I tried with push:</p>
  
  <pre><code>actions: {
      addOne: function() {
          this.set('comments', this.get('comments').push({content: 'agent k'});
      }
  }
  </code></pre>
  
  <p>with pushObject:</p>
  
  <pre><code>actions: {
      addOne: function() {
          this.set('comments', this.get('comments').pushObject({content: 'agent k'});
      }
  }
  </code></pre>
  
  <p>nothing! Since this is driving me crazy, can someone tell what's wrong with this?</p>
  
  <p>Template:</p>
  
  <pre><code>{{log comments}}
  {{#each comments as |comment|}}
      &lt;div class="card"&gt;
          &lt;div class="card-content"&gt;
              {{comment.username}}&lt;br&gt;
              {{comment.content}}
          &lt;/div&gt;
          &lt;div class="card-action"&gt;
              {{comment.createdAt}}
          &lt;/div&gt;
      &lt;/div&gt;
  {{/each}}
  </code></pre>