[f7+vue] multiple views not updating with `v-if`

Questions
1

Hello,
i have the following code:

    <f7-view main url="/mandatory-update-pending/" v-if="mandatoryUpdatePending"></f7-view>
    <f7-view main url="/" v-else-if="!userIsLogged"></f7-view>
    <f7-views tabs v-else> ... </f7-views tabs>

where mandatoryUpdatePending and userIsLogged are computed properties.

I am trying to conditionally render the correct f7-view(s) depending on the value of the computed properties.
The first render is always correct, as Vue only instantiates the correct item based on the v-if/v-else-if/v-else statements.

The problem is, if the computed properties change, Vue (correctly) re-renders the virtual DOM (i checked with vue-devtools), but the framework7 app does not update. It’s like the framework doesn’t see the changes in the virtual DOM.

Why is this happening? What am i doing wrong?

Thank you for your time

2

That is Vue’s issue, just add key's to views:

<f7-view key="view1" main url="/mandatory-update-pending/" v-if="mandatoryUpdatePending"></f7-view>
<f7-view key="view2" main url="/" v-else-if="!userIsLogged"></f7-view>
<f7-views key="view3" tabs v-else> ... </f7-views tabs>
3

Thanks, it works, you rock sir