Observer problem

component.js

export default Ember.Component.extend({
  selection: [],
  columns: function() {
    return this.get('columnDefinitions').map(function(colDef) {
      return fluidColumn.create(colDef);
    });
  }.property('columnDefinitions'),
  selectionChanged: function() {
    console.log('in selection changed');
  }.observes('selection'),

  columnDefinitions: [
    {
      columnWidth: 90,
      textAlign: 'text-align-left',
      headerCellName: 'Score',
      contentPath: 'score'
    },
    {
      columnWidth: 150,
      textAlign: 'text-align-left',
      headerCellName: 'Author',
      contentPath: 'author'
    },
    {
      columnWidth: 150,
      textAlign: 'text-align-left',
      headerCellName: 'Type',
      contentPath: 'type'
    },
    {
      columnWidth: 150,
      textAlign: 'text-align-left',
      headerCellName: 'Created',
      contentPath: 'created'
    },
    {
      columnWidth: 150,
      textAlign: 'text-align-left',
      headerCellName: 'Bate',
      contentPath: 'bate'
    }
  ]
});

template.emblem

.search-results.stack-item
  ul.container-fluid
    = table-component hasFooter=false enableContentSelection=true rowHeight=24 columns=columns content=results selection=selection