Glimmer child component does not re-render when the parent passes it a different argument - glimmer.js

Question

To be more explicit, the child component creates a property which is dependent on the argument passed by the parent component. I am not using the parent argument directly in the child template (this case works just fine).
Coming from a React background, my mental model suggests new arguments passed to a component will trigger re-render. But I am aware Glimmer does things differently with its #tracked decorator.
Okay, here is the contrived example. For a demo, head to the Glimmer Playground.
// parent-template.hbs
<button onclick={{action doubleNumber}}>Double Number</button>
<div>
Parent - {{number}}
</div>
<Child #number={{number}} />
// parent-component.ts
import Component, { tracked } from '#glimmer/component';
export default class extends Component {
#tracked number = 2;
doubleNumber() {
this.number = this.number * 2;
}
}
// child-template.ts
<div>
Child will render double of parent {{doubleOfParent}}
</div>
// child-component.ts
import Component, { tracked } from "#glimmer/component";
export default class extends Component {
args: {
number: number;
}
get doubleOfParent () {
return 2 * this.args.number;
}
};
Here the parent displays the doubled number on every click of the button. But the child never re-renders?
My question is do we always need to have the tracked variable inside the template. In this case number. And express the child template like this
<div>
Child will render double of parent {{double #number}}
</div>
Here double is helper which doubles the number.
If it is so what is the reason behind having the tracked properties/argument in the template?

Answer 1

It looks like your doubleOfParent() method is missing a #tracked annotation since its output depends on the args property:
import Component, { tracked } from "#glimmer/component";
export default class extends Component {
args: {
number: number;
}
#tracked('args')
get doubleOfParent() {
return 2 * this.args.number;
}
};
you can find more information on this topic at https://glimmerjs.com/guides/tracked-properties