ember component does not update template

I'm trying to build a component that receives an ember array of objects (each of them representing a comment), and returns an ember array of rows (each row is an ember array of 2 comments); the purpose is to format the original array of objects received into a HTML grid layout:

//main template
{{#column-layout list=comments as |comment|}}
    <div>
        <h5>{{comment.username}}</h5>
        <p>{{comment.content}}</p>
    </div>
{{/column-layout}}


//column-layout template
{{#each rows as |row|}}
    <div class="row">
        {{#each row as |item|}}
            <div class="col s6">  // column 50% width
                {{yield item}}
            </div>
        {{/each}}        
    </div>
{{/each}}

and the column-layout component's javascript:

export default Ember.Component.extend({
    init: function() {
        var self = this;

        self._super();

        var data = this.get('list');
        var itemsPerRow = 2
        var rows = Ember.A();
        var row = Ember.A();

        if (data) {
            data.forEach(function(item, index) {
                if (index % itemsPerRow === 0 && index !== 0) {
                    rows.push(row);
                    row = [];
                }

                row.push(item);
            });
        }

        if (row.length > 0) {
            rows.push(row);
        }


        // manage scroll after adding or removing items
        self.get('list').addArrayObserver(Ember.Object.create({
            arrayWillChange: Ember.K,
            arrayDidChange: function(array, start, removeCount, addCount) {
                if (addCount > 0) {
                    var row = Ember.A();

                    row.push(array[start]);
                    rows.push(row);
                    self.set('rows', rows);
                }
            }
        }));

        self.set('rows', rows);
    },

});

The thing that doesn't work here is that the template does not update adding the new comment when the arrayObserver fires;

the weird thing is that if I do self.set('rows', []) in the "arrayDidChange" function, the template updates, removing all comments as expected; but self.set('rows', rows) has no effect event if "rows" is the correctly updated array with the new row;

Can someone explain what am I doing wrong here?