ArrayProxy

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  arr1: Ember.A([{a:1,b:2},{a:3,b:4}]),
  arr: Ember.ArrayProxy.extend({
    init() {
      this.set('content', Ember.A([{a:1,b:2},{a:3,b:4}])); 
      this._super(...arguments);
    },
    m1() {
      //debugger;
      Ember.set(this.get('content').objectAt(0), 'a', 2);
      this.pushObject({a:5, b:6});
    },
    /*contentArrayWillChange(contentArray, start, removeCount, addCount) {
      this.arrayContentWillChange(start, removeCount, addCount);
    },
    contentArrayDidChange(contentArray, start, removeCount, addCount) {
      this.arrayContentDidChange(start, removeCount, addCount);
    }*/
  }).create(),
  click() {
    this.get('arr').m1(); 
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<button {{action click}}>test</button>
{{#each arr as |el|}}
<br>
{{#each-in el as |k v|}}
{{k}}: {{v}}
{{/each-in}}
{{/each}}

twiddle.json

{
  "version": "0.10.5",
  "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.8.2",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.2",
    "ember-testing": "2.8.2"
  },
  "addons": {}
}