How to make simple mobx reaction work in sub component - reactjs

Question

I miss something in mobx observables and reactions.
I prepared two examples, one of them works, the other does not, I don't understand why.
Example 1 (does not work):
#observer class Alert1 extends Component {
constructor(props) {
super(props);
this.r2 = reaction(
() => this.props.v1,
v => console.log("Alert1 reaction trigger",v)
);
}
render() {
return null;
}
}
#observer class Main extends Component {
#observable v1 = false;
render() {
return (
<div>
<Alert1 v1={this.v1} />
<button onClick={e=>this.v1=!this.v1}>Switch</button>
</div>
);
}
}
In example 1 we just send observable variable in props and create reaction in Alert1 component, but it does not trigger.
Example 2 (works):
#observer class Alert2 extends Component {
constructor(props) {
super(props);
this.r2 = reaction(
() => this.props.someObj.v1,
v => console.log("Alert2 reaction trigger",v)
);
}
render() {
return null;
}
}
#observer class Main extends Component {
constructor(props) {
this.someObj = observable({v1:observable(false)});
}
render() {
return (
<div>
<Alert2 someObj={this.someObj} />
<button onClick={e=>this.someObj.v1=!this.someObj.v1}>Switch</button>
</div>
);
}
}
That's almost the same as example 1, but we wrap v1 observable into the other observable. Alert2 reaction works.
The same time if we move reactions from Alert1 and Alert2 components to the Main component's constructor, both reactions works.
Here's jsfiddle example with both components, https://jsfiddle.net/kasheftin/zex0qjvf/1/

Answer 1

See https://mobxjs.github.io/mobx/best/react.html, in your first example, you are not passing an observable around, but just a plain boolean value (true or false), so there is nothing for the reaction to react to. In javascript, all values are immutable so per definition something that is observable. It are the properties that are observable.
In the second example you pass an object with an observable property, so that is something that can be reacted to.
Note that creating a boxed observable would also work, as those can be passed around as first class citizens. E.g.: v1 = observable(false) and reaction(() => this.props.v1.get(), ...