How to refresh the component?

I found several questions covering this topic, but I can't make them work.

I have the following controller. The 'latestDaily' selects the latest record of the model. The 'latestDaily' property also feeds the record to a component:

App.ActionsController = Ember.ArrayController.extend({

  latestDaily: function() {
    var dates =  this.get('model').filterBy('actionType', 'daily').mapBy('date');
    var maxDate = new Date(Math.max.apply(null,dates));
    var sMaxDate = String(maxDate);
    var latestAction = this.get('model').filter(function(item){
      if(String(item.get('date')) == String(maxDate)) {
        return true;
      }
    });
    return latestAction[0];
  }.property('model.@each'),

});

With the template:

<script type="text/x-handlebars" id="actions">

  <div class='container-fluid'>
    <div class="row">

      <div class="col-md-6 col-lg-4">    <!-- Latest Daily -->
        <div style="height: 35px">
          <H2 class="text-big-light" style="color:#62D3F1">Daily BP</H2>                           
        </div>
        {{update-action action=latestDaily}}
      </div>
    </div>
  </div> 
</script>

The 'Update-Action' component may create a new action record and save it to the Ember-Data Store. When a new record is created, it should have the maximum Date of all the records and thus it should be selected by the 'latestDaily' property of the controller. Since the 'latestDaily' property listen to 'model.@each', I expect it would rerun but it does't seems to fire and the component is not updated.

How can the component be updated (re-polulated) with the new Action record just created?

The component code:

App.UpdateActionComponent = Ember.Component.extend({

  /* Public API */
  action: null,

  /* Internal */
  _user: function() {
    return user = this.store.find('user', this.get('session.userID')).then(function(user) {
      return user;
    }, function(error) {
      alert('Could not find user: ' + error );
    });
  }.property(),

  actions: { 
    createAction: function() {
      var _this = this;
      var currAction = this.store.createRecord('action', {
        date: new Date(),
        conditionType: '',
        period: '',
        comment: '',
      });

      var user = this.store.find('user', this.get('session.userID')).then(function(user) 
        {
          user.get('actions').pushObject(currAction);   
          currAction.save().then(user.save());
          console.log('action ' + currAction.id + ' created and user updated');
        }, function(error) {
          alert('Could not find user: ' + error );
        });

    },

    saveAction: function() {
      var action = this.get('action');
      action.set('date', moment(this.get('action.date')).toDate())
          .set('comment', this.get('redactorValue'))
          .save(); 
    },
  },
});

In my Application, the Ember-Data Store has been injected to all components. I imagine I should rather create the new records at the Route level by letting the action bubble up from the component with '.sendAction()' so that the component is more decoupled from the rest of the code? However, I understand that the controllers may deprecated with Ember 2.0 ( http://ift.tt/1oaN6hS ). So I'm not sure if the components will gain greater access to the Store by default? Maybe creating the records at the route level would simplify re-rendeing of the view? Or should I create the record at the controller level?

Thanks