javascript - Vue component doesn't reload with getter data (not reactive)

Question

I have this ecommerce mock app in Vue and Vuex. This page shows a list of phones and there is a filter which filters phones based on the phone brands through checkboxes.

The problem is the page doesn't refresh straight away after I click the checkbox to filter. If I click another page and click back to the original page, then the page gets filtered.

The is my source code. Some code is removed for brevity.

Product.vue

import { mapActions } from "vuex";
import BrandFilter from "../components/BrandFilter";

export default {
  data() {
    return {
      products: this.$store.getters.filterProducts
    };
  },
  components: { BrandFilter }
};

<template>
  <div class="container">
    <div class="row">
      <div class="col-lg-3"><BrandFilter></BrandFilter></div>
      <div class="col-lg-9">
        <div class="row">
          <div v-for="product in products" :key="product.id">            
                <h4 class="card-title product__title">
                  {{ product.title }}
                </h4>                            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Answer 1

When you set a data item to a getter in Product.vue, it gets assigned only once. If the getter changes, the data doesn't change with it:

data() {
  return {
    products: this.$store.getters.filterProducts  // ? Incorrect
  }
}

Use a computed instead with mapGetters to keep the component data synced with the Vuex data:

import { mapGetters } from 'vuex';

computed: {
  ...mapGetters(['filterProducts'])  // ? Correct
}

Change your template to use that computed:

<div v-for="product in filterProducts" :key="product.id">            
   <h4 class="card-title product__title">
      {{ product.title }}
   </h4>                            
</div>