ember.js: each helper not updating changes

I have a component sortable-list which has the following template

<!-- templates/components/sortable-list.hbs -->
{{#each items as |item index|}}
  {{yield item index}}
{{/each}}

and code

// components/sortable-list.js
export default Ember.Component.extend(PreserveScroll, {
  initSortable: function() {
    var refreshed = false;
    var _this = this;

    this.$().sortable({
      axis: 'y',
      update: function(event, ui) {
        Ember.run.scheduleOnce('afterRender', this, function(){
          var id = ui.item.data('id').toString();
          var idx = Ember.$(this).children().index(ui.item);
          Ember.$(this).sortable('cancel');
          _this.updateItemOrder(id, idx);
        });
      },
      start: function() { // event, ui
        if (!refreshed) {
          _this.$().sortable('refreshPositions');
          refreshed = true;
        }
      }
    });
  }.on('didInsertElement'),

  destroySortable: function() {
    this.$().sortable('destroy');
  }.on('willDestroyElement'),

  updateItemOrder: function(key, idx) {
    var items = this.get('items');
    var item  = items.findBy('id', key);
    this.beginPropertyChanges();
    items.removeObject(item);
    items.insertAt(idx, item);
    this.endPropertyChanges();
  }
});

In one of my templates I have

<!-- templates/draft/index.hbs -->
{{#sortable-list items=model.items as |item index|}}
  {{item-summary item=item index=index}}
{{/sortable-list}}

The problem I’m having is when I sort the items and updateItemOrder gets called, with removeObject and insertAt updating the items array, the list is not being re-rendered. This used to work before I moved this code from my route’s view to a component.