Sort Issue

adapters.application.js

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  namespace: 'api/v1',
});

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.set('sortBy', [ this.get('sortBy') ]);
    } else {
      this.set('sortBy', []);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Mirage Sort Issue'
});

mirage.config.js

export default function() {
  this.namespace = '/api/v1';

  this.get('/categories');
  this.get('/categories/:id');
}

mirage.fixtures.category.js

export default [
  {
    id: 'main-dishes',
    title: 'Main Dishes',
  }, {
    id: 'cakes-pies-and-sweets',
    title: 'Cakes, Pies & Sweets',
  }, {
    id: 'langappie',
    title: 'Langappie',
  }, {
    id: 'dips-and-sauces',
    title: 'Dips & Sauces',
  }, {
    id: 'meat-dishes',
    title: 'Meat Dishes',
  }, {
    id: 'vegetable',
    title: 'Vegetable',
  }, {
    id: 'seafood-dishes',
    title: 'Seafood Dishes',
  }, {
    id: 'bread-and-cereals',
    title: 'Bread & Cereals',
  }
];

mirage.models.category.js

import { Model, hasMany } from 'ember-cli-mirage';

export default Model.extend({
});

mirage.scenarios.default.js

export default function(server) {
  server.loadFixtures();
}

models.category.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  title: DS.attr(),
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return this.get('store').findAll('category');
  }
});

templates.application.hbs

<h1>{{appName}}</h1>
<br>
{{#column-list class="categories" 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",
  "ENV": {
    "ember-cli-mirage": {
      "enabled": true
    }
  },
  "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": {
    "ember-cli-mirage": "0.3.0-beta.4"
  }
}