Problems with expensive computed property passed down to children

[hedefalk]

I have a big table of data. When the data is updated I need to do a pretty expensive computation on the whole thing. This is then needed for the rendering of each data element (row of a table in this case). The expensive computed property needs to be calculated only once (per update of the collection) but I'm stuck in something where it's either not working at all or recalculated for each row.

So in this first version I'm using this.$data.rows and then it's recalculated n+1 times:

http://jsfiddle.net/hedefalk/5gkhkgen/3/

If I instead use this.$rows it works the way I want in this simple case:

http://jsfiddle.net/hedefalk/5gkhkgen/4/

However, when setting the rows from outside the way I have in my real use case the reactiveness breaks instead:

http://jsfiddle.net/hedefalk/5gkhkgen/5/

(it logs undefined for the rows)

I guess it's some WTF in here, and I'm doing something wrong with using $data or $items incorrectly, but when reading about it I can't seem to get what I'm doing wrong or how to fix it.

[hedefalk]

Sorry about really confusing fiddles. I think this one explains more clearly:

http://jsfiddle.net/hedefalk/5gkhkgen/6/

I get 4 log outputs (n+1) where n is the number of rows. I just want 1 :)

[hedefalk]

Pretty please, anyone?