EmberJS computed sort property conflicting with jQuery UI Sortable

I am having an issue with getting drag-and-drop sort functionality with EmberJS working.

The tutorials that cover this issue don't provide any help on the initial sort, which I am doing through a computed property.

What I'm encountering seems to be a race condition between ember's rerender when the sortedItems computed property changes and jQueryUI Sortable updating the DOM. List Items get duplicated, or disappear altogether upon sorting.

Route

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return Ember.Object.create({
      id: 1,
      title: "Title",
      subtitle: "Subtitle",
      items: [
        Ember.Object.create({
          name: "Item 2",
          sortOrder: 2,
          id: 1
        }),
        Ember.Object.create({
          name: "Item 1",
          sortOrder: 1,
          id: 2
        }),
        Ember.Object.create({
          name: "Item 3",
          sortOrder: 3,
          id: 3
        })
      ]
    });
  }
});

Controller

import Ember from 'ember';

export default Ember.ObjectController.extend({

  sortProperties: [ 'sortOrder' ],
  sortedItems: Ember.computed.sort('model.items', 'sortProperties'),

  actions: {
    updateSortOrder: function(indexes) {
      this.get('items').forEach(function(item) {
        var index = indexes[item.get('id')];
        item.set('sortOrder', index);
      });
    }
  }

});

View

import Ember from 'ember';

export default Ember.View.extend({

  didInsertElement: function() {
    var controller = this.get('controller');

    this.$(".item-list").sortable({
      update: function(event, ui) {
        var indexes = {};

        $(this).find('li').each(function(index) {
          indexes[$(this).data('id')] = index;
        });

        controller.send('updateSortOrder', indexes);
      }
    })
  }
});

Template

<h1>{{ title }}</h1>
<h2>{{ subtitle }}</h2>

<ul class="item-list">
  {{#each item in sortedItems }}
    <li data-id="{{ unbound item.id }}">
      name: {{ item.name }}<br />
      sortOrder: {{ item.sortOrder }}<br />
      id: {{ item.id }}
    </li>
  {{/each}}
</ul>

Here's a Barebones Ember app that reproduces the issue: http://ift.tt/19fNCnK

Question

Is there a way to avoid this race condition or sort only once when the controller is initialized?

Apologies if there is already an answer on the interwebs for this. I haven't been able to resolve this despite a week of searching/experimenting.