JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.3/ember.min.js"></script>
Open your console window, then press:
<br />
<input type='button' id='changeName' value="Change citizen's name">
<br />If @each.@each worked, you'd see "The government observes" whenever you press this button.

JavaScript

window.App = Ember.Application.create({});
$(function () {

    // Observe-e
    App.Citizen = Ember.Object.extend({});

    // Observer
    App.Government = Ember.Object.extend({
        
        // This is our 2D array
        rows: Ember.A(),
        
        // This just inits the 2D array with Citizen objects.
        start: function () {
            for (i = 0; i < 10; i++) {
                var row = Ember.A();
                for (j = 0; j < 10; j++) {
                    window.lastCitizen = App.Citizen.create({
                        name: 'Citizen ' + i + '-' + j
                    });
                    row.pushObject(window.lastCitizen);
                }
                this.get('rows').pushObject(row);
            }
        },
        
        // The observer function that should fire whenever you press that button
        spy: function () {
            console.log("The Government observes");
        }.observes('rows.@[email protected]')
    });

// ----- unimportant stuff below here -----
    $('#changeName').click(function () {
        window.lastCitizen.set('name', 'Kevin' + Math.random() );
        console.log('Changed name to ' + window.lastCitizen.get('name'));
    });

});

App.IndexRoute = Ember.Route.extend({
    setupController: function () {
        var govt = App.Government.create();
        govt.start();
    },
});