testing DOM

components.test-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  someComputedProperty: Ember.computed('item.label', function() {
    const item = this.get('item');

    Ember.Logger.log('someComputedProperty', item.label);

    return `${item.label} ${new Date}`;
  })
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  data: Ember.A([]),

  actions: {
    addData: function() {
      const data = this.get('data');

      data.pushObject({ label: data.length });
    },

    changeData: function() {
      this.set('data.0.label', this.get('data.0.label') + 1);
    },
  }
});

templates.application.hbs

<button {{action 'addData'}}>Add</button>
<button {{action 'changeData'}}>Change</button>

{{#each data as |item|}}
  {{test-component item=item}}
{{/each}}

templates.components.test-component.hbs

<span style="color:red">{{item.label}}</span>
<span style="color:blue">doesn't change</span>
{{someComputedProperty}}

twiddle.json

{
  "version": "0.4.7",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.10.2",
    "ember-data": "2.10.0",
    "ember-template-compiler": "2.10.2"
  }
}