Why doesnt an ember observer fire on arrays?

I am trying to listen to specific property on every element in an array and get a result from that. However, updates dont appear to happen properly.

var emptyEmberObjectClass = Ember.Object.extend({});
var container = Ember.Object.extend({
  data: Ember.A([
    emptyEmberObjectClass.create({yo:1}),
    emptyEmberObjectClass.create({yo:2}),
    emptyEmberObjectClass.create({yo:3})
  ]),
  computedData: Ember.computed('data.@each.yo', function(){
    var sum = 0;
    this.get('data').forEach(function(data){
      sum = sum + data.yo;
    });
    return sum;
  }),
  test: Ember.observer('computedData', function(){
    Ember.$('#a').html('woohoO!');
  })
}).create();
var existingItem = container.get('data');
existingItem.objectAt(0).set('yo', 50);

http://ift.tt/1iRtSN4

As you can see, the text field still says 'start' and doesnt get updated to 'woohoO!'.

Any help will be greatly appreciated.