New Twiddle

components.my-butt.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions:{
   add(){
     const match = this.get('match');
     this.set('model', [...this.model, match].uniq())
    },
    remove(){
      const match = this.get('match');
		  const index = this.get('model').indexOf(match);
      if(index !== -1){
        this.get('model').splice(index, 1);
      }
      this.set('model', this.get('model').uniq());
    }
  }
});

components.my-group.js

import Ember from 'ember';

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

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  //arr: ["English", "Science"],

  init() {
    this.set('arr', ["English", "Science"]);
  },
  actions: {
    reset() {
      this.set('arr', ["English", "Science"]);
    },
    blank() {
      this.set('arr', []);
    },
    checkValue() {
      alert(this.get('arr'));
    },
    tryForceUpdate() {
      this.set('arr', this.arr.uniq());
    },
    add(val) {
      if (!this.get('arr').includes(val)) {
        this.arr.pushObject(val);
      }
      this.set('arr', this.get('arr').uniq());
    },
    remove(val) {
      const index = this.get('arr').indexOf(val);
      let arr = this.get('arr');
      if (index !== -1) {
        arr.splice(index, 1);
      }
      this.set('arr', arr.uniq());
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family:  Arial, sans-serif;
  font-size: 12pt;
}
button{
  background-color: #8845;
  font-size: 13px;
}

templates.application.hbs

<b>Current Selection:</b> {{arr}} and its length is {{arr.length}}
<br>
<br>
<button {{action "reset"}}>Reset to [English, Science]</button>
<button {{action "blank"}}>Set To blank []</button>
<button {{action "checkValue"}}>Check Whats Set</button>
<button {{action "tryForceUpdate"}}>Try Force Update</button>
<br>
<h4>Add by Push Method</h4>
<button {{action "add" "English"}}>Add English </button>
<button {{action  "add" "Science"}}>Add Scienc </button>
<button {{action  "add" "Maths"}}>Add Maths </button>
<h4>Remove by Splice</h4>
<button {{action "remove" "English"}}>remove English </button>
<button {{action  "remove" "Science"}}>remove Scienc </button>
<button {{action  "remove" "Maths"}}>remove Maths </button>
<!--
<h4>Add by Push and Reset Method</h4>
<button {{action "addR" "English"}}>Add English </button>
<button {{action  "addR" "Science"}}>Add Science </button>
<button {{action  "addR" "Maths"}}>Add Maths </button>
-->
<br>
<br>

<h3>Update Values inside Components</h3>


{{#my-group model=arr as |grp|}}
   {{grp.item match="English"}}
   {{grp.item match="Science"}}
   {{grp.item match="Maths"}}
{{/my-group}}

templates.components.my-butt.hbs

TO Match: {{match}} <br>
<b> --- Model Value Inside</b>: {{model}}
<br>
<button {{action "add"}}>Add {{match}}</button>
<button {{action "remove"}}>Remove {{match}}</button>
<br>
<br>
<br>

templates.components.my-group.hbs

Value inside component: {{model}}
<br><br>
{{yield 
	(hash
    item =(component "my-butt" object=object model=model )
  )
}}

twiddle.json

{
  "version": "0.15.1",
  "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.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  }
}