title: Vue js: Computed property not updating when changing route
body: <p>I have a dashboard page that when I refresh the page it works fine, I retrieved my data. However, when I go to other links and move back to my dashboard page (previous page) it doesn't update my computed <code>giveaways</code> property, it doesn't return the data anymore but in my response It still work fine it just not rendering because of my computed property. I'm using axios in my vuex, I tried also the <code>this.$forceUpdate</code> but I don't know where's the right place to do this. What I trying to make is like everytime they go that dashboard.vue page whether its via refresh or vue-route it should reupdate the computed property because I reevaluate the data from my serverside.</p>
  
  <p>Here is my Dashboard.vue script</p>
  
  <pre><code>import {mapState} from 'vuex'
  import { mapGetters } from 'vuex'
  
  export default{
      ready(){
          this.loaded =false;
  
      },
      data: () =&gt; ({
          cards: [
  
          ],
          cards_offender:[
  
          ],
          //giveaways: '',
  
          loaded: true
      }),
      computed:{
          ...mapState({
              Giveaway: state =&gt; state.Threshold.giveaways
          }),
          ...mapGetters({
              //done : 'doneGiveaways',
              //Done : getter =&gt; getters.Threshold.doneGiveaways
          }),
          giveaways(){
              //this.$foreceUpdate();
              //this.$store.dispatch('getGiveAways');
              return this.$store.getters.doneGiveaways
          },
          testing(){
              return this.$store.getters.loadTesting
          }
      },
      watch:{
          giveaways(newVal, oldVal){
              console.log(newVal + 'test');
          },
          testing(newVal, oldval){
              console.log(newVal)
          },
          deep: true
      },
      created(){
  
      },
      methods:{
  
      },
      mounted(){
          this.$store.dispatch('getGiveAways');
          this.cards[2].result_val = this.$store.getters.doneGiveaways;
          if(this.$store.getters.doneGiveaways &gt; 0){
              this.cards[2].background_color = 'orange';
              console.log('wew');
          }
          /*if(this.$store.state.Threshold.giveaways === null){
              this.$store.dispatch('getGiveAways');
          }else{}*/
      }
  }
  </code></pre>
  
  <p>And here is my Threshold.js vuex</p>
  
  <pre><code>import Vue from 'vue';
  import VueAxios from 'vue-axios';
  import axios from 'axios';
  Vue.use(VueAxios, axios);
  
  
  const state = {
      giveaways: null,
      testing: ['wew']
  }
  
  const actions = {
      getGiveAways : ({commit}) =&gt;{
          axios({
              url : '/prod/api/thresholds_settings',
              method: 'post',
              data : {
              },
              config: 'JOSN'
          })
          .then(response=&gt;{
              if(response.status == 200){
                  //console.log(response.data.total_giveaways);
                  commit('SET_GIVEAWAYS', response.data.total_giveaways)
                  //dispatch('getGiveAways');
              }
          })
          .catch(error=&gt;{
              if(error.response){
                  console.log('something happened')
              }
          });
      }
  }
  
  const mutations = {
      SET_GIVEAWAYS : (state, obj)=&gt;{
          state.giveaways = obj
      }
  
  }
  
  const getters = {
      doneGiveaways(state){
          return state.giveaways
      },
      loadTesting(state){
          return state.testing
      }
  }
  
  export default {
      state, mutations, actions, getters
  }
  </code></pre>