Redraw Child Component of LWC When @api parameter changes [duplicate]

Question

I have a parent-child LWC:

<template>
    <template if:true={isInitialized}>
        <lightning-layout multiple-rows="false">
            <template if:true={showCustomerQuote}>
                <lightning-layout-item size="6">
                    <c-customer-quote-builder record-id={customerLoadId} 
                                              object-api-name={objectApiName} 
                                              customer-load-list={customerLoadList}
                                              oncustomerloadchanged={customerLoadChangedHandler}
                                              onaddtocarrierquote={addToCarrierQuoteHandler}></c-customer-quote-builder>
                </lightning-layout-item>
            </template>
            <template if:true={showCarrierQuote}>
                <lightning-layout-item size="6">
                    <c-carrier-quote-builder record-id={carrierLoadId} 
                                             object-api-name={objectApiName} 
                                             carrier-load-list={carrierLoadList}
                                             oncarrierquotechanged={carrierQuoteChangedHandler}
                                             onaddtocustomerquote={addToCustomerQuoteHandler}></c-carrier-quote-builder>
                </lightning-layout-item>
            </template>
        </lightning-layout>
    </template>
</template>

I want the child to send an event to the parent, which changes @api parameters on the same child:

Child Event Dispatcher:

customerLoadChanged(event) {
    const e = new CustomEvent('customerloadchanged', { detail: { loadId: event.target.value }});
    this.dispatchEvent(e);                    
}

Parent Event Handler changes @api parameter on the child who sent the event:

customerLoadChangedHandler(event) {
    this.customerLoadId = event.detail.loadId;
}

Event though customerLoadId/recordId is an @api parameter on the child the child does not re-render:

@api recordId;                                  // Load__c or CustomerQuote__c Id

Why doesn't the update of an @api parameter by a parent pushed to a child NOT redraw the child??

Thanks.

Answer 1

It's a hack but if I wrap each child in a tracked list and vary the key I pass to it, the child component rerenders as I need it to:

                    <template for:each={fakeCustomerLoadList} for:item="l">
                    <c-customer-quote-builder   key={l.UniqueIdentifier}
                                                record-id={customerLoadId} 
                                                object-api-name={objectApiName} 
                                                customer-load-list={customerLoadList}
                                                oncustomerloadchanged={customerLoadChangedHandler}
                                                onaddtocarrierquote={addToCarrierQuoteHandler}></c-customer-quote-builder>
                </template>