Ember error Modified twice in a single render

In my Ember app, I have a hbs template defined as below (simply iterates through an array 'myContainers' & prints some fields);

Also my component JS is as below (Iterates through server response 'gridItems' prop & finally returns an array );

myContainers: function(){
    var self = this;        
    let gridItems = this.get('secInfo.gridItems');        
    Ember.set(this.get('secInfo'), 'myRows', Ember.A([]));
    Ember.set(this.get('secInfo'), 'myRowsToRender', Ember.A([]));

    this.get('secInfo.myRows').pushObject(gridItems);
    var updatedContainers = [...gridItems];
    Ember.set(this.get('secInfo'), 'myRows', updatedContainers);

    self.get('secInfo.myRows').forEach(function(container) {
        // Iterate & set field values
    });
    Ember.set(this.get('secInfo'), 'myRows', this.get('secInfo').myRowsToRender);
    return this.get('secInfo').myRows;
}.property('secInfo.gridItems'),

Now my question is with the above code, everything works fine & I am able to see the data on screen.

But the moment, I try to update my hbs by wrapping in 'my-accordion' component;

You modified 'someAttr' twice in a single render error & I cannot see any data.

PS: It is surely not an issue with the my-accordion component as the same is tested in other places.

Please help.