http://stackoverflow.com/questions/41797485/emberjs-how-to-update-property-on-a-component-from-route/41798188

components.sis-db-description-render.js

import Ember from 'ember';

export default Ember.Component.extend({

    info: null,
    ready: false,
    ajaxCall: null,

    didInsertElement: function () {
        console.log('didInsertElement ');
        this.queryData();


    },

    didUpdateAttrs: function () {
        this._super(...arguments);       
      console.log('didUpdateAttrs ');
        this.queryData();

    },

    queryData: function () {

        /**Ember.$.post() **/
      Ember.RSVP.resolve('response').then((result) =>{
        this.set('info',result+'-'+this.get('idTitle'));
      });
    },


    willDestroy: function () {

        this.ajaxCall.abort();

    }   

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  actions: {

    showDescription: function (params) {
       console.log(' showDescription in app controller',params);
        this.set('model.selectedModule', params);

    }

}
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
 selectedModule: '',

    model: function () {

        return {
            selectedModule: 'employeeModule'
        };
    },
   
});

templates.application.hbs

<div class="row">
    <div class="col-md-6 col-xs-12 col-sm-6">
        <div id="employeesCard" class="row mCard mHovered" {{action "showDescription" "employeeModule" on="mouseEnter"}}>
            <div class="col-md-12 mButtonType">
                <div class="row header">
                    <h1>Employees</h1>
                </div>
                {{#link-to 'index' class="mRoundButton"}} <i class="fa fa-2x fa-plus" aria-hidden="true"></i>                {{/link-to}}
            </div>
        </div>
        <br>
        <div id="supervisorCard" class="row mCard mHovered" {{action "showDescription" "supervisorsModule" on="mouseEnter"}}>
            <div class="col-md-12 mButtonType">
                <div class="row header">
                    <h1>Supervisors</h1>
                </div>
                {{#link-to 'index' class="mRoundButton"}} <i class="fa fa-2x fa-plus" aria-hidden="true"></i>                {{/link-to}}
            </div>
        </div>
    </div>
    <div id="descriptionArea" class="col-md-6 col-xs-6 col-sm-6 top-separator">

        {{sis-db-description-render idTitle=model.selectedModule}}

    </div>
</div>


{{outlet}}

templates.components.sis-db-description-render.hbs

 {{#if ready}} 
 
    {{#if info}} 
 
        {{{info}}}     
 
    {{/if}} 
 
 {{else}} 
 
 {{!--#sis-indicator-loading}}Información{{/sis-indicator-loading --}}

{{/if}} 
{{idTitle}} - {{info}}
{{yield}}

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {}
}