I have two entities: categories and subcategories and two lists. When user selects a category I display subcategory list.

At first try it works fine, but when I change category I got old subcategory list.

Both categories and subcategories are in vuex store.

I tried to calculated subcategories next ways:

1. Computed property
2. When user selects a category I invoke a method, which filters subcategories by category_id and returns new list

Nothing worked for me. Here is an example of computed property:

subCategories() {
  return this.getClothingSubCategories.filter((subCategory) => {
    return subCategory.clothing_category_id === this.category.clothing_category_id
  })
},

Where this.getClothingSubCategories is a vuex getter.

What's weird is that both in vue plugin (in chrome developer tools) and console I got the list updated, but in html the list is old.

Here is how I display the list:

<VuePerfectScrollbar class="categories"
                     v-if="showSubCategories"
                     v-once>
  <ul>
    <li v-for="subCategory in subCategories"
        :key="subCategory.clothing_subcategory_id"
        @click="selectSubCategory(subCategory)">
      <div class="title">{{ subCategory.title }}</div>
      <div class="arrow">></div>
    </li>
  </ul>
</VuePerfectScrollbar>

So, the subCategories property relies on category object, which I set simply:

selectCategory(category) {
  this.category = category
},

When user selects a category.

I specified :key, tried different approaches but nothing worked, I always get the old list of subCategories.

What could be the reason?

update

Vuex getter:

export const getClothingSubCategories = (state) => {
  return state.clothingSubCategories
}

Component data:

data() {
    return {
      gender: 'female',
      category: null,
      subCategory: null,
      good: null,

      filters: {
        gender: 'female',
        clothing_subcategory_id: null
      }
    }
  },