A compiled and mounted tag doesn't seem to update - riot.js

Question

After compiling and mounting a tag which reads an opts property passed down from it's parent, when the passed down opt is updated, I cannot get the child reading the property to update.
To see a demo of the problem run:
git clone https://github.com/shouston3/learn-riot.git && cd learn-riot/demo-problem
npm i && npm start
visit http://localhost:3333
When you increment the counter, the uncompiled counter will update,
But the compiled one wont
How can I get this to update?
Thanks in advance for the help

Answer 1

I simplified your code assuming that you want to increment both parent and child tag. I removed the var self=this, than in this case wasn't needed, and changed this assignation self.opts.count = ++self.opts.count; to this.count = ++this.count
The problem is that you tried to assign the data to the opts, that's not how it works. To pass data to the children you just pass the params in the tag <count count={this.count}></count> (probably is better to use different names for tags and variables)
Here is the code
<demo>
<button onclick={increment}>increment</button>
<h1>Uncompiled count: {this.count}</h1>
<count count={this.count}></count>
this.count = 0;
increment () {
this.count = ++this.count;
console.log('count: ', this.count);
this.update();
}
</demo>
Here is the example
https://jsfiddle.net/vitomd/mjqa2d5j/4/