Ember link attribute with display value

My Ember Route class looks like below

export default Ember.Route.extend({
    selectedRowCount: 10,

    actions: {
        dataLoaded: function(resp) {
            this.set('gridPrms.summaryObj.total.value', resp.numRows) ;
            var additional = this.get('gridPrms.summaryObj.additional');
            additional.push({label: 'Selected', value: this.get('selectedRowCount')});
            this.set('gridPrms.summaryObj.additional', additional);
        },
        rowSelected: function(data){
            // This gets called and updates selectedRowCount, but the same is not reflected on UI
            this.set('selectedRowCount',this.get('selectedRowCount') + 1);
        },
        rowDeselected: function(data){
            // This gets called and updates selectedRowCount, but the same is not reflected on UI
            this.set('selectedRowCount',this.get('selectedRowCount') - 1);
        }
    }
}); 

Also my template looks like

{{my-grid params=this.gridPrms dataLoaded="dataLoaded" rowSelected="rowSelected" rowDeselected="rowDeselected"}}

And my summary object is as below

var summaryObj = {
    total: {
        label: "Items",
        value: "15"
    },
    additional: []
};

My question is when I render the page, my grid loads and sets the "additional" attribute (Selected label) from the route attribute "selectedRowCount" correctly

But the same does not get updated "on UI" when user does row select/deselect

How do I link the 2 things ?