New Twiddle

components.abc-comp.js

import Ember from 'ember';

export default Ember.Component.extend({
  critService: Ember.inject.service(),
  actions: {
    reloadCrits() {
      this.get("critService").loadCrits();
    },
    modifyCritVal(crit, k) {
      crit.set(k, "ABC value");
    }
  }
});

components.def-comp.js

import Ember from 'ember';

export default Ember.Component.extend({
  critService: Ember.inject.service(),
  actions: {
    modifyCritVal(crit, k) {
      crit.set(k, "DEF value");
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

services.crit-service.js

import Ember from 'ember';

const Crit = Ember.Object.extend({
	data1: null,
	data2: null
});

const Crits = Ember.Object.extend({
	crit1: null,
	crit2: null
});

export default Ember.Service.extend({
  crits: null,
  loadCrits() {
    var c1 = Crit.create({
      data1: "one " + Math.random(),
      data2: "two " + Math.random()
    });
		var c2 = Crit.create({
      data1: "three " + Math.random(),
      data2: "four " + Math.random()
    });
		var crits = Crits.create({crit1: c1, crit2: c2});
		this.set("crits", crits);
  },
  init() {
    this._super(...arguments);
    this.loadCrits();
  }
});

templates.application.hbs

{{abc-comp}}
{{def-comp}}
{{outlet}}

templates.components.abc-comp.hbs

<h2>ABC</h2>

<button {{action "reloadCrits"}}>Reload crits</button>

<table>
	{{#each-in critService.crits as |key crit|}}
	<tr>
		<td>
			{{key}}
		</td>
		<td><ul>
			{{#each-in crit as |k v|}}
				<li>
					{{k}} = {{get crit k}}
					<button {{action "modifyCritVal" crit k}}>change</button>
				</li>
			{{/each-in}}
		</ul></td>
	</tr>
	{{/each-in}}
</table>


{{yield}}

templates.components.def-comp.hbs

<h2>DEF</h2>

<table>
	{{#each-in critService.crits as |key crit|}}
	<tr>
		<td>
			{{key}}
		</td>
		<td><ul>
			{{#each-in crit as |k v|}}
				<li>
					{{k}} = {{get crit k}}
					<button {{action "modifyCritVal" crit k}}>CHANGE</button>
				</li>
			{{/each-in}}
		</ul></td>
	</tr>
	{{/each-in}}
</table>

{{yield}}

twiddle.json

{
  "version": "0.10.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  },
  "addons": {}
}