The child component uses the color name set on the parent in x-text. You can also update properties on the component you are watching (click on the text to instruct the child to update the parent color to pink)

This component is the same as above, but also watches the third component's color as well

The child component uses the color name set on the granparent in x-text. You can also update properties on the component you are watching (click on the text to instruct the child to update the parent color to pink)

This watches a non-parent component. It requires adding an `id` attribute or `x-id` so the component can be identified

Watch a parent component and external component that does not have a visible mutation

NB: Color should remain teal since no mutation

Parent is first encountered inside an event

Updating nested property (`$parent.square.color`)

Updating deeper nested property (`$parent.shape.square.color`)