[SalesForce] Why aura:iteration doesn’t re-render when you add element to parent component’s list

I declared a parentComponent with an attribute of type list. I am passing that list to child component.

In my child component, I am iterating over that list using aura:iteration . Also I provided a button in child component to new elements to the list I got from parent compoent, I am able to add it. but then aura:iteration doesn't render the newly updated value.

If I just use the child component, the aura:iteration re-rendring works.

Cant we update the parent component's value from child component? If so why aura:iteration not showing updating value?

here is my minimum viable code to reproduce this issue.

childComponent.cmp

<aura:component >
    <aura:attribute type="List" name="myList" default="[]"></aura:attribute>

    <aura:iteration items="{!v.myList}" var="ele" indexVar="count">

        {!count}<br></br> 
    </aura:iteration>
    <lightning:button variant="brand" label="addNewElement" title="addNewElement" onclick="{!c.addNewElement }"/>
</aura:component>

ChildComponentController.js

({
    addNewElement : function(component, event, helper) {
        let retList=component.get("v.myList");
        retList.push({}); //Adding new element
        component.set("v.myList", retList);  
        console.log('pushed'+retList.length);
    }
})

ParentComponent.cmp

<aura:component >
    <aura:attribute type="List" name="myList" default="[]"></aura:attribute>

    <c:childComponent myList="{!v.myList}"></c:childComponent>
</aura:component>

That being said, pressing the addNewElement button, adds element in child element, no matter how many time you press that button, but in case when its embeded in parent component, the aura: iteration rerenders only once.

Update : As suggested by Raul, i tried
{#v.myList} while passing value to child component. It works, but same values are not reflected back to parent, (Which is the behaviour of unbound expression).