No re-renders when observed state is used in some parts of the template

[EranNL]

Hello,

First of all, I am quite new to Vue, so I might have missed some documentation. I have used Mobx in combination with React, and haven't had any issues there regarding views not being updated.

Secondly, I have a quite complex construction, where I inject my stores via Inversify in order to have some sort of IoC-layer between my components and stores. This works, however, correctly as far as I can see.

But, it works as long as I use the observable properties from my stores directly in my template. Using the @Observer-decorator, my views update and everything is fine.

However, I am using vee-validate for validating my forms. I have Vee-validate's observer around my form, in which a button exists. This button is listening to a loading state in my store, and should be updated whenever the loading state changes.

For example: There is a login form, when clicking the button Vee-validate's observer checks whether all required inputs are filled. When that is the case, the login method is called. This login method triggers a method in the store. At that point, the loading state is set to loading, which should update the button in the template. The store method does some things with the API to check whether the user can be logged in, whereafter the loading state is set to "loaded".

And there it goes wrong. I can see in my template that the state goes back to loading. But it doesn't switch to "loading" in Vee-validate's observer. I have to change an input in order to trigger a re-render, before the button is switched back to the already switched store loading state. This can be seen in this video: https://imgur.com/a/1NsNevz The true/false is the same loading state indicator as is used in the button. As can be seen, the true/false at the bottom is updated when the action is done loading. The button however doesn't update until I type. You can also see some error messages appearing at the top. These are also handles with stores and injected in components.

The code for the Vue component I am using: https://gist.github.com/emachiels/81fd1b0e552bb536d499db75b3dd153f

And the code for the cocStore: https://gist.github.com/emachiels/ae7ca3d6fcbea6e3c06644cef0368df6

Does someone know what the problem is? Thanks in advance!

-- EDIT -- I am using the following versions: Mobx: 5.15.4 Mobx-Vue: 2.0.10 Vue: 2.6.11 Vee-validate: 3.3.3

[damirbogd]

@emachiels having somewhat similar issue, have you been able to fix that?

[EranNL]

@damirbogd, haven't been able to fix it so far. I work mostly with React, so haven't tried it either. But hopefully it works better with V3 of Vue.

[Sarps]

@damirbogd I'm having a similar issue. Were you able to work around this?

[EranNL]

@Sarps It has been a while since I used the combination Vue and Mobx, so I am not sure if and how I fixed it. Are you using Vue 3?