arrangedContent not updating when using Ember.SortableMixin and child array

I've created a component to wrap the usage of jquery ui's sortable. I would like to use this component within a controller template by either passing the current model or a child of that model to the content property of my component.

Example usage:

{{#sortable-list tagName="ul" content=model.colours as |item|}}
  <li class="sortable-item" data-id={{item.id}}>{{item.sequence}} {{item.colour}} asd</li>
{{/sortable-list}}

The component uses Ember.SortableMixin to sort the component on initial load and uses the 'arrangedContent' property to iterate over this sorted collection.

This all works well until I add a new item to the collection, if I've passed the model directly it works as expected, if I've passed a child of the model nothing is updated.

I've created a jsbin as an example - when clicking "Add Colour" I would expect to see a new colour added to both lists, this however is not the case.

http://ift.tt/1cfsGPi