ember jquery ui sortable remove item not in sync

component:

export default Ember.Component.extend({

_refreshSortable() {
    this.$().sortable('destroy');
    this.renderSortable();

},
fakeDataChanged: Ember.observer('fakeData.[]', function() {
    Ember.run.scheduleOnce('afterRender', this, this._refreshSortable);

}),

fakeData: [
    Ember.Object.create({id: 1, name: 'test'}),
    Ember.Object.create({id: 2, name: 'test1'}),
    Ember.Object.create({id: 3, name: 'test2'}),
    Ember.Object.create({id: 4, name: 'test3'}),
],

actions: {
    removeItem(item) {
        this.get('fakeData').removeObject(item);

    }

},
renderSortable() {
        this.$().sortable({
            opacity : 0.6,
            axis : 'y'

           });

           this.$().sortable().disableSelection();

   },

   _renderSortable: Ember.on('didInsertElement', function() {

       this.renderSortable();

   }),



});

template:

    

        

            <li><button >x</button></li>

        

    

If you try and remove an item AFTER a sort is perform, it will either lock up the ability to remove, or remove items which it's not supposed to.

This is simplified code in order to describe the root problem.