How to nest child templates in parent templates and still have updatable data to flow from parent to child?

[SentientNr6]

Hey All,

I started using petite-vue and so far it did everything I expected of it and I basically enjoyed it's minimalist approach. So Kudos to the creator and the community.

One concept I am struggling with though is how to combine templates and pass data from a parent component to a child. I would assume that when updating the property in the parent the child would update automatically. (And vice versa that I would have to use an event)
But that doesn't seem to be so simple? Do I need to keep some shared state to share data and update data from parent to childs?

I tried to create a minimal sample. I would expect that when hitting the button both the parent and child component update the value. But only the parent is updated.
https://jsfiddle.net/4exdu7n3/

Any suggestions are welcome.

Thanks!

[SentientNr6]

Ok I found a solution since somewhere I read that the properties passed can't be native.
So the fact that I am expecting the number to be updated seems to be the issue. If I wrap the number in an object and pass that it seems to work fine. Not sure whether that is the most elegant way but it works for me.

https://jsfiddle.net/4exdu7n3/1/

[sqllyw]

another way is, directly refer to the parent_prop:

<template id="child">
  <div>child: {{parent_prop}}</div>
</template>