Child component's @api setter bound to nested property not firing after modifying root-level @track'd variable #5346
Description
Description
Child component's @api setter that is bound to a nested property within a @track'd class instance does not receive the updated value in response to the parent's @track'd variable being updated at the root.
I have a custom class that represents a store for a grid row editor widget. It has a nested property rows and each row can have additional sub-rows via a subRows property. Those entries are reflected in the UI as an editable table. When a row's type is switched to a group, it should generate an empty sub-row for the user to interact with.
The store sits in a higher level component and it's data is passed down to children via a direct reference to its rows variable, but first through a root-level wrapper plain object. In order to trigger rerenders the intention was to replace that root-level wrapper object with a fresh instance, while keeping the inner store instance the same.
I've used this approach in other components successfully, but it doesn't seem to be behaving predictably in this situation. I can observe when the underlying data is modified (a new blank row is added), but the setter in the child component never fires.
Steps to Reproduce
https://stackblitz.com/edit/salesforce-lwc-vmdmbqre?file=src%2Fmodules%2Fx%2Fapp%2Fapp.js
Expected Results
I'd expect the updated data store state to trigger a rerender of the front-end, and the new blank sub-row to be rendered beneath its parent row.
Actual Results
The underlying data store is updated, but the child setter never fires and the front-end does not rerender.
Browsers Affected
Can only confirm this behavior in Google Chrome 135.0.7049.115.
Version
- LWC: 8.18.1
Also seems to affect the on-platform version of LWC (where I originally ran into this).
Additional context/Screenshots
These are the logging statements I've set up in the reproduction link above. The @api setters all have console.log statements to signal when they receive new values. The function that handles adding blank rows in response to a row being newly set to "group" mode also has an "Adding blank row to row group" log.
The primitive UI set up in the repro to demonstrate the issue. Essentially just a two-column table, but with support for sub-rows. Disabling group mode for a row should remove all sub-rows. Enabling group mode for a row should add one empty sub-row. If the last row (either global last or per-group last) was just modified, it should also add an empty row.
