LWC: How to update child component’s data from parent component, without refreshing or AuraCreateComponent

Especially data that’s not trackable by default (like an Array or JSObject)

Most of the times the data that we pass on to the child component is not displayed as is by it.

I does some updates or has to make some removals to it.

When we use default trackable decorator, we miss modification part of the data on default view.

Here’s how you can achieve both, modification and reactivity of data.

parent html App.html

parent component — App.js

Child Component Child.html

Child Component Child.js

The trick is to use template’s queryselector api to call child’s methods, which is exposed using api decorator