Ember data changes in parent component not refelecting on UI


I have a parent component which has an accordion panel (with multiple/dynamic number of rows)

{{#my-accordion accordionPanels=accordionPanels as |accordion| }}
{{my-details-row section=accordion.props.section removeRow='removeRow'}}

The corresponding JS is as below;

accordionPanels: function() {
    var accordionPanels = [];
    var self = this;
    var myRows = this.get('section').myRows;
    myRows.forEach(function(myRow) {
            panel: {
                name: myRow.rowId,
                props: {
                    section: myRow

    return accordionPanels;

actions: {
    removeRow: function(row){
        var numberContainers = this.get('section').myRows.length;
        for (var i = 0; i < numberContainers; i++){
                console.log("row found!");

The child component (my-details-row) code is as below

actions: {
    removeRow: function(row){
        this.sendAction('removeRow', row);

The child hbs is as below;

<div class="dataBlockItem">
    {{my-field field=(field-from-section section "SECTION_NAME" "FIELD_NAME") }}
{{my-button label="Remove" action="removeRow"}}

Now when the Remove button is clicked, I want the corresponding row to be removed. While I do get the action in the parent (passed from child), even after executing the line

this.get('section').myRows.removeObject(row.name); The UI does not get updated (i.e. the data changes in the parent do not reflect in the child component)

Do I need to write additional code/logic to be able to reflect the changes on the UI ?


Can you try using this.get('section.myRows') instead?