Emberjs object loses its property after computed sort - ember.js

Question

I have a table component, which receives a model what i call content.
{{my-table content=model }}
This model get sorted into a computed property (CP).
multiSort: Ember.computed.sort('content','sortProperitsWithOrders')
I loop through the multiSort and pass each row to the a row component
{{#each row in multiSort}}
{{my-table-row row=row columns=columns}}
{{/each}}
In each row I have a checkbox component. If it changes, an action is sent up to its parent component (the row component). From the row I send the action further to the table component (action up), where I toggle the row's active property.
The problem: after I use sort, the row lose its active property, and the checkbox is unchecked. Check a checkbox then hit the header of a column.
I would think Ember.compute.sort takes the content and rearrange it based on sortProperitsWithOrders. So if I set the active property on one of the content's item, then I will have it in the multiSort CP. From multiSort it will pass down to the row component, and from the row to the checkbox (data down).
JsBin: http://jsbin.com/mojuquhawo/1/edit?html,js,output

Answer 1

You will find that a new instance of MyTableRowComponent is created for each row each time you sort. When this happens the active property (which originates from MyTableRowComponent) is set to its initial value of false.
See example JSBin showing a new component being created on each sort - look at the console logging.
You need somewhere to store the active property where it persists - the Customer model seems like the most appropriate place.
Also I notice that MyCheckboxComponent is not extending from Ember.Checkbox - instead it's using an Ember.Component - this will likely cause issues as well.