double each helper doesn't fire observed property group.cards.[] [jsbin]

I made a jsbin to reproduce the problem but the bug doesn't happen on jsbin. http://ift.tt/1MWG3Rk.

I have this double each helper template:

   {{#each group in groups}}
     {{#each card in group.cards}}
        {{#play-card card=card group=group}}{{/play-card}}<br/>
     {{/each}}
   {{/each}}

problem is play-card component:

App.PlayCardComponent = Ember.Component.extend({
  number: function() {
    return this.get('card.number');
  }.property('card'),

  index: function() {
    var card = this.get('card');
    var cards = this.get('group.cards');
    var idx = cards.indexOf(card);

    return idx;
  }.property('card', 'group.cards.[]')
});

Notice the index property is observing group.cards.[]. So whenever a new card is added/removed from the group all the cards in that group should update their indexes.

In the jsbin It works fine. But it fails to fire in my real example. What could be the problem there.

Note that i am sure this is the same problem because I have this workaround to force update all the cards in the group:

refreshModels: function() {
  var cards = this.get('cards');
  var tempCards = [];

  cards.forEach(function(card) {
    tempCards.push(card);
  });

  tempCards.forEach(function(card) {
    cards.removeObject(card);
    cards.addObject(card);
  });
}