ManyArray Glimmer Bug

application.controller.js

import Ember from 'ember';
const { computed } = Ember;

export default Ember.Controller.extend({
  commentArray: computed('model.comments.[]', function() {
    return this.get('model.comments').toArray();
  }),
  favourites: computed.filterBy('model.comments', 'isFavourite'),
  favouritesHack: computed.filterBy('commentArray', 'isFavourite'),
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    let store = this.store;
    let project = store.createRecord('project');
    
    let comment1 = store.createRecord('comment', { project, name: 'Foo', isFavourite: true });
    let comment2 = store.createRecord('comment', { project, name: 'Bar', isFavourite: false });
    let comment3 = store.createRecord('comment', { project, name: 'Baz', isFavourite: false });
    
    project.get('comments').pushObject(comment1);
    project.get('comments').pushObject(comment2);
    project.get('comments').pushObject(comment3);
    
    return project;
  },
  
  actions: {
    favourite(item) {
      item.set('isFavourite', true);
    },
    unfavourite(item) {
      item.set('isFavourite', false);
    }
  }
});

application.template.hbs

<p>The following demonstrates an issue with <code>PromiseManyArray</code>.</p>

<hr>
<p>Rendering the complete PromiseManyArray works fine.</p>
<p><code>model.comments</code></p>
<ul>
	{{#each model.comments as |item|}}
  	<li>
    	{{item.name}}
      {{#if item.isFavourite}}
      	<button {{action "unfavourite" item}}>Unfavourite</button>
      {{else}}
      	<button {{action "favourite" item}}>Favourite</button>
      {{/if}}
    </li>
  {{/each}}
</ul>

<hr>
<p>The idomatic method of filtering this array appears to break rerender.</p>
<p><code>favourites: computed.filterBy('model.comments', 'isFavourite')</code></p>
<ul>
	{{#each favourites as |favourite|}}
		<li>
    	{{favourite.name}}
    	<button {{action "unfavourite" favourite}}>Unfavourite</button>
    </li>
  {{/each}}
</ul>

<hr>
<p>Converting the <code>PromiseManyArray</code> to a native array works, but why?</p>
<p>
  <pre>commentArray: computed('model.comments', function () {
  return this.get('model.comments').toArray();
}),
favourites: computed.filterBy('commentArray', 'isFavourite')</pre>
</p>
<ul>
	{{#each favouritesHack as |favourite|}}
		<li>
    	{{favourite.name}}
    	<button {{action "unfavourite" favourite}}>Unfavourite</button>
    </li>
  {{/each}}
</ul>

<hr>

<p>As far as I can tell this issue only affects <code>PromiseManyArray</code>. <code>ManyArray</code> works great.</p>

models.comment.js

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  isFavourite: DS.attr('boolean'),
  project: DS.belongsTo('project')
});

models.project.js

import DS from 'ember-data';

export default DS.Model.extend({
  comments: DS.hasMany('comment')
});

twiddle.json

{
  "version": "0.5.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.3.0-beta.5/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}