title: Vue Vuex: old data remains for some time before computed property changes
body: <p>I'm new to <code>vuex</code> and I still I have over used it. For say, I have a <code>product</code> lists in my <code>store</code> state. When I view one <code>product</code> i make <code>axios</code> call with that <code>product.id</code> and commit the product data into <code>currentProduct</code> state. Then if I view another product then the page is rendered with <code>currentProduct</code> state i.e old 
   data at first then after my <code>action</code> <code>commits</code>.. it is then updated to newly fetched <code>currentProduct</code> then vue changes my view data to new data. The <code>user</code> can clearly see old data being replaced by new data. 
  But I want to load the page only after new data is commited to my <code>state</code>.</p>
  
  <pre><code>`store.js`
  
  state :{
      productList:{},
      currentProduct:{
       id:'',name:'',price:'','seller'
      }
  },
  mutations:{
      UPDATE_CURRENT_PRODUCT : (state, data) =&gt;{
       state.currentProduct = Object.assign({},state.currentProduct, data);
      }
  
  },
  actions:{
      fetchProducts(){
       const response = fetch...... // logic to fetch product
       commit('UPDATE_CURRENT_PRODUCT', response.data);
      }
  }
  </code></pre>
  
  <p><strong>My render page:</strong></p>
  
  <p>This page displays the lists of my products</p>
  
  <pre><code>'productList.vue'
  
  &lt;div v-for="product in productList" @click="viewProduct(product.id)"&gt;
      &lt;p&gt;{{product.name}}&lt;/p&gt;
  &lt;/div&gt;
  
  computed(){
  
      ...mapState(['productList'])
  
  },
  methods:{
      viewProduct(product_id){
          this.$store.state.dispatch('fetchProducts', product_id);
      }
  }
  </code></pre>
  
  <p>This page renders the view of that particular product</p>
  
  <pre><code>`product.vue`
  
  &lt;div&gt;
      &lt;p&gt;{{currentProduct.name}}&lt;/p&gt;
  &lt;/div&gt;
  
  computed(){
  
      ...mapState(['currentProduct'])
  
  }
  </code></pre>
  
  <p>In my <code>product.vue</code> first old data is shown then after some time new data replaces it ... Something is missing.. I want to see the new data directly with out seeing old data being replaced by new data. Is there a way around <code>vuex</code></p>