Vue Rendering of component based on VUEX getter

Question

I have this code to render my main screen. I want to render the components based on the value I get from vuex store.

All is good. The problem the component does not reload when the mutation happens. Any tips, please?

<template>

<component v-bind:is = "showDashboard" > </component>
 
</template>

<script>
import AllOrganizationDashboard from "../components/AllOrganizationDashboard"
import OrganizationDashboard from "../components/OrganizationDashboard"
import ProjectDashboard from "../components/ProjectDashboard"
export default {
  components: {


AllOrganizationDashboard,OrganizationDashboard,ProjectDashboard,
  }, 
  data(){
    return {
      
      showDashboard: this.$store.getters.getcurrentDashboardToShow,
    }
  }

}

I hope there is an easy way and that I do not need to re-structure my componenets.

Answer 1

You have to use computed instead of data, because data is executed only once when the component is created. This should work

computed: {
  showDashboard() {
    return this.$store.getters.getcurrentDashboardToShow
  }
}

More about computed