component.js

import Ember from 'ember';

export default Ember.Component.extend({

  // Does not fire
  dataObserver: Ember.on('didInsertElement', Ember.observer('visualization', function() {
    console.log("visualization changed");
  })),

  // Does fire
  dataObserver: Ember.on('didInsertElement', Ember.observer('visualization.fontSize', function() {
    console.log("visualization changed");
  })),


  didInsertElement() {
    console.log('didInsertElement visualization-component');

    AmCharts.makeChart("visualization-" + this.get('visualization').get('id'),
      JSON.parse(JSON.stringify(this.get('visualization')))
    );
  },

	didUpdateAttrs(options) {
    console.log('didUpdateAttrs visualization-component', options);
	},

  didInitAttrs(options) {
    console.log('didInitAttrs visualization-component', options);
  },

  willUpdate(options) {
    console.log('willUpdate visualization-component', options);
  },

  didReceiveAttrs(options) {
    console.log('didReceiveAttrs visualization-component', options);
  },

  willRender() {
    console.log('willRender visualization-component');
  },

  didRender() {
    console.log('didRender visualization-component');
  },

  didUpdate(options) {
    console.log('didUpdate visualization-component', options);

    console.log('didUpdate called!');
    console.log(this.get('visualization').get('fontSize'));

    AmCharts.makeChart("visualization-" + this.get('visualization').get('id'),
      JSON.parse(JSON.stringify(this.get('visualization')))
    );
  }
});