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.sort('items', 'sortBy'),

  didReceiveAttrs() {
    if (this.get('sortBy')) {
      this.get('sortBy', [ this.get('sortBy') ]);
    } else {
      this.set('sortBy', []);
    }
  }
});

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

{{#each sortedItems as |item|}}
  <li>
     {{#if link}}
       {{#link-to link }}
         {{yield item}}
       {{/link-to}}
     {{else}}
       {{yield item}}
     {{/if}}
  </li>
{{/each}}

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