Value linked to object prop does not update if object is passed to another component

[kaleidawave]

Given:

<SomeComponent data="someObj"></SomeComponent>
<h3>{someObj.username}</h3>

Executing:

***.data.someObj.username = "lorem-ipsum"

SomeComponent will see the updates and update its view but the text content of the h3 will stay the same.. This is because the component data tree references SomeComponents reactive data property under someObj and that reactive data tree is isolated to SomeComponent so it cannot bubble up changes to the main component.

This is quite a tricky one and one that prevents some uses cases. For now one could collapse SomeComponent into the others dom:

<div>
    <!--. .. -->
    <h2>{someObj.username}</h2>
    <!--. .. -->
</div>
<h3>{someObj.username}</h3>

To fix this there would likely be changes to observable.ts and the data reactivity compilation. It would have to know that the object prop is used twice, one in its own component DOM and also passed to another component. It could then wrap / proxy it and make sure the changes are done both in its own DOM and passing the update down to SomeComponent.

This would still have the issue that if SomeComponent changes its own username from inside, whether this should bubble up to the parent importer. This is not possible in React and why their context library. Not sure whether it would be a good feature but certainly possible under compilation.

There is also ways that #16 could help with this. Such as manual firing a method that could emit a event to the parent (importee) component so that it could update the h3 value...

[kaleidawave]

Thinking a bit about this and what should happen. The nested component should know its parent uses one (or more) of its properties. Then it should compile in something into the reactive tree to look up the parent (via closest) and modify its dom. That way can keep the single proxy. And will still work if this components reactive tree is created but the parent one isn't.