Why component doesn't render when I change the route?

Question

I have a template, and there is a component:

        <super-visor
            v-if="!top10ModeActivated"
            v-for="cart in getCarts(index + 1)"
            :cart="cart"
            :key="cart.position"
        ></super-visor>

As you can see, this component renders when top10ModeActivated is only false ;

   computed: {
        top10ModeActivated() {
            return this.$store.state.moduleSearch.top10ModeActivated;
        },
   }

I put debugger to top10ModeActivated and it works only when component renders only for the first time. So I see my component, only when I refresh the page but not when I change the route.

Can anybody help me and describe me how I can fix this? Because I'm new to VueJS.

Answer 1

Use methods because computed properties are cached . See below:

   methods: {
        top10ModeActivated() {
            return this.$store.state.moduleSearch.top10ModeActivated;
        },
   }

and

        <super-visor
            v-if="!top10ModeActivated()"
            v-for="cart in getCarts(index + 1)"
            :cart="cart"
            :key="cart.position"
        ></super-visor>

Answer 2

Accessing store state directly from computed property doesn't make it reactive. Use getters instead. Create a Vuex getter which would return top10ModeActivated and then call that getter in a computed property to have it reactive.