Parent / Child Component Communication

components.checkbox-component.js

import Component from '@ember/component';
import { action, computed, observes } from '@ember-decorators/object';

export default class extends Component {
    
  selectedItems = [];
  _cbState = false;
  _changeCounter = 0;
  parent = false;
  
  @observes('changeCounter') 
  watchForChanges() {
    if (!this.parent) return;
		if (this._changeCounter === this.changeCounter) return;
    
    this.set('_changeCounter', this.changeCounter);
    // this.set('cbState', false);
   }
  
  @computed('parentValue')
  get cbState() {
    console.log(this.parentValue, this._cbState);
    
    if (this.parentValue) {
      this._cbState = false; 
    }
    
    return this._cbState;
  }
  set cbState(value) {
    this._cbState = value; 
  }
 
  @action
  myChangeAction(nextValue) {    
		this.set('cbState', nextValue);
    //console.log("type", this);
    console.log(this.group)
    
    
      if (nextValue) {
        this.get('selectedItems').pushObject(this);
      } else {
        this.get('selectedItems').removeObject(this);
      }
    
    console.log("this.get('selectedItems')", this.get('selectedItems'))
    
    if (this.trackChange) {
     	this.trackChange(); 
    }
  } 
}

components.wrapping-component.js

import Component from '@ember/component';
import { action, computed } from '@ember-decorators/object';

export default class extends Component {
  changeCounter = 0;
  
  @action
  trackChange() {
    this.set('changeCounter', this.changeCounter + 1);
  }
  
}

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  items : [{
  "title" : "burger",
    "id": "bk2",
   "subgroup" : [
     {"name" : "tomato", "id": "tomo2"}, {"name" : "lettuce", "id": "let2"}, {"name" : "pickle", "id": "pickl3"}]
  },
  {
  "title" : "kebab",
    "id": "kb2",
   "subgroup" : [{"name" : "ketchup", "id": "ketchu2"}, {"name" : "chilli", "id": "chilli2"}]
  }]
});

helpers.not.js

import Ember from 'ember';

export function not(params/*, hash*/) {
  return !params[0];
}

export default Ember.Helper.helper(not);

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.checkboxhandler{
  position: relative;
  margin-left: 10px;
  margin-bottom:10px;
  border: 1px solid red;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>

<WrappingComponent as |changeCounter trackChange|>
<label>changeCounter: {{changeCounter}}</label>
  
  {{#each items as |item index|}}
  
    <CheckboxComponent 
       @label={{item.title}}
       @item={{item}}
       @group={{index}}
       as |parentValue changeParent|
       >

              {{#each item.subgroup as |itm i|}}  

                    <CheckboxComponent 
                    @label={{itm.name}}
                    @item={{itm}}
                    @group={{index}}
                    @parentValue={{parentValue}}
                    >
                  </CheckboxComponent>

              {{/each}}

    </CheckboxComponent>
  
  {{/each}}


</WrappingComponent>
<br>
{{outlet}}
<br>
<br>

templates.components.checkbox-component.hbs

<div class="checkboxhandler">
  <input 
  	type="checkbox" 
    checked={{this.cbState}}
    id="click-drag-item-{{this.item.id}}"
    onclick={{action this.myChangeAction (not this.cbState) this.group }}>
  <label>{{@label}}</label>
  
	<label class='info'>cbState: {{this.cbState}}</label>
  	{{yield this.cbState (action this.myChangeAction)}}
</div>

templates.components.wrapping-component.hbs

{{yield this.changeCounter (action this.trackChange)}}

twiddle.json

{
  "version": "0.15.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.1",
    "ember-template-compiler": "3.4.1",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-decorators": "2.0.0"
  }
}