Computed Properties with @each (working - Ember 2.0.2)

application.controller.js

import Ember from 'ember';

let lastId = 0;

export default Ember.Controller.extend({
  rootItems: Ember.computed.filter('owner.items', function(item) {
    return item.get('parent.content') === null;
  }).property('[email protected]'),
  
  owner: Ember.computed(function() {
    let owner = this.store.createRecord('owner');
    
   	this.store.createRecord('item', {
    	id: ++lastId,
      owner: owner,
      parent: null
    });
    
   	this.store.createRecord('item', {
    	id: ++lastId,
      owner: owner,
      parent: null
    });
    
    return owner;
  }),
  
  actions: {
    addRootItem() {
      return this.store.createRecord('item', {
        id: `${++lastId}`,
        owner: this.get('owner'),
      	parent: null 
      });
    },
    
    changeParent(item, parentId) {
      let itemId = item.get('id');
      
      let parent = this.get('owner.items').findBy('id', parentId);
      
      if (!parentId) {
        console.log(`Set parent of item ${itemId} to null`);
      	return item.set('parent', null);
      }
      
      if (_parentIsIllegal(item, parent)) {
        console.log("Can't set item's parent to itself or one of its descendants");
      	return;
      }
      
      if (parent) {
        console.log(`Set parent of item ${itemId} to ${parentId}`);
        
        return item.set('parent', parent);
      }
    }
  }
});

function _parentIsIllegal(item, newParent) {
  let itemInAncestors = false;
  let ancestor = newParent;

  while (ancestor && !itemInAncestors) {
    itemInAncestors = ancestor === item;

    ancestor = ancestor.get('parent.content') || ancestor.get('parent');
  }

  return itemInAncestors;
}                                                                                             

application.template.hbs

<h3>All items ({{owner.items.length}})</h3>

{{items-list items=rootItems changeParent=(action "changeParent")}}

<button {{action "addRootItem"}}>Add root item</button>

<p>
  Displays a tree of items.
</p>

<p>
  If an item's parent is `null`, the item will appear at root.
</p>

<p>
  If an item's parent is another item, it will appear as a descendant of that item.
</p>

<p>
  To change an item's parent, type the new parent's id into the input and press enter.
</p>

<p>
  To change an item's parent to `null`, clear the input and press enter.
</p>

items-list.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

items-list.template.hbs

{{yield}}

<ul>
  {{#each items as |item|}}
    <li>
      {{single-item item=item changeParent=attrs.changeParent}} 
      
      {{#if item.children}}
        {{items-list items=item.children changeParent=attrs.changeParent}}
      {{/if}}
    </li>
  {{/each}}
</ul>

models.item.js

import DS from 'ember-data';
import Ember from 'ember';

export default DS.Model.extend({
  owner: DS.belongsTo('owner'),
  parent: DS.belongsTo('item', {inverse: null}),
  children: Ember.computed.filter('owner.items', function(item) {
  	return item.get('parent.content') === this;
  }).property('[email protected]')
});

models.owner.js

import DS from 'ember-data';

export default DS.Model.extend({
  items: DS.hasMany('item')
});

single-item.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
  	changeParent(newParentId) {
      let item = this.get('item');

    	return this.attrs.changeParent(item, newParentId);
    }
  }
});

single-item.template.hbs

{{item.id}} -

parent: {{input value=(readonly item.parent.id) enter=(action "changeParent")}}

twiddle.json

{
  "version": "0.4.17",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.0.2",
    "ember-data": "2.2.0"
  }
}