http://stackoverflow.com/questions/42035190/ember-js-component-sort-model-based-on-if-property-is-set

components.column-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'ul',
  classNames: ['column-list'],  
  sortedItems: Ember.computed('items', 'sortBy', function() {
    var sortByColumn = this.get('sortBy');
    if (this.get('sortBy') !== undefined) {      
      return this.get('items').sort(function(a,b){
        var nameA = a[sortByColumn].toUpperCase();
        var nameB = b[sortByColumn].toUpperCase();
        console.log(' nameA ',nameA, 'nameB ',nameB);
        if (nameA < nameB) {
         return -1;
  			}
  			if (nameA > nameB) {
    			return 1;
  			}
  			// names must be equal
  			return 0;
      });
    } else {
      return this.get('items');
    }
  }),
  actions:{
    changeSortBy(){
      this.set('sortBy','id');
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return [
  {
    id: '3',
    title: 'Main Dishes',
  }, {
    id: '2',
    title: 'Cakes, Pies & Sweets',
  }, {
    id: '1',
    title: 'angappie',
  }, {
    id: '4',
    title: 'Dips & Sauces',
  }, {
    id: '5',
    title: 'Meat Dishes',
  }, {
    id: '8',
    title: 'Vegetable',
  }, {
    id: '6',
    title: 'Seafood Dishes',
  }, {
    id: '7',
    title: 'Bread & Cereals',
  }
];
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
{{#column-list class="categories" sortBy="title" link="index" items=model as |i|}}
  {{i.title}}
{{/column-list}}
<br>
{{outlet}}
<br>
<br>

templates.components.column-list.hbs

{{log sortBy sortedItems }}
{{#if sortBy}}
  {{#each sortedItems as |item|}}
    <li>
       {{#if link}}
         {{#link-to link }}
           {{yield item}}
         {{/link-to}}
       {{else}}
         {{yield item}}
       {{/if}}
    </li>
  {{/each}}
{{else}}
  {{#each items as |item|}}
    <li>
       {{#if link}}
         {{#link-to link }}
           {{yield item}}
         {{/link-to}}
       {{else}}
         {{yield item}}
       {{/if}}
    </li>
  {{/each}}
{{/if}}
<button {{action 'changeSortBy'}}> Change Sortby </button>

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": {}
}