How to integrate Mobx State Tree and Vue JS?

Question

Vue.js

The question is in the title. De jure, I managed it, but it works quite crookedly, not as expected, not as pure mobx works. This is strange, because MST is based on mobx and should provide the same reactivity, and this does not happen.

I'll start with an example in the sandbox: codesandbox

As you can see, there is one component that changes the store through an action (Changer) and two components that display data. The Test component relies on props passed in various ways (computed prop, function), while the BlindTest component is an observer and tries to take data directly from the store (using various methods).

The problem is that everything works and the component is updated if and only if I pass a property to the components through a function, or a snapshot of the store by the function. If I pass, for example, an instance of a store, it will not work. I'll try to knock on the store directly - it won't work. Computed property - will not work (in general, this never works at all in mst + mobx-vue + vue).

As a result, it turns out that in order for the component to respond normally to store changes (i.e. update, call updated), I need to throw props into it, while the essence of mobx is a little different: the component will update in response to the update store if it is an observer.

What did I do wrong and what should I do?