title: VueJS does not rerender list even though array has changed & v-key is specified
body: <p>I have two entities: categories and subcategories and two lists. When user selects a category I display subcategory list.</p>
  
  <p>At first try it works fine, but when I change category I got old subcategory list. </p>
  
  <p>Both categories and subcategories are in vuex store.</p>
  
  <p>I tried to calculated subcategories next ways:</p>
  
  <ol>
  <li>Computed property</li>
  <li>When user selects a category I invoke a method, which filters subcategories by category_id and returns new list</li>
  </ol>
  
  <p>Nothing worked for me. Here is an example of computed property:</p>
  
  <pre><code>subCategories() {
    return this.getClothingSubCategories.filter((subCategory) =&gt; {
      return subCategory.clothing_category_id === this.category.clothing_category_id
    })
  },
  </code></pre>
  
  <p>Where <code>this.getClothingSubCategories</code> is a vuex getter.</p>
  
  <p>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.</p>
  
  <p>Here is how I display the list:</p>
  
  <pre><code>&lt;VuePerfectScrollbar class="categories"
                       v-if="showSubCategories"
                       v-once&gt;
    &lt;ul&gt;
      &lt;li v-for="subCategory in subCategories"
          :key="subCategory.clothing_subcategory_id"
          @click="selectSubCategory(subCategory)"&gt;
        &lt;div class="title"&gt;{{ subCategory.title }}&lt;/div&gt;
        &lt;div class="arrow"&gt;&gt;&lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/VuePerfectScrollbar&gt;
  </code></pre>
  
  <p>So, the subCategories property relies on category object, which I set simply:</p>
  
  <pre><code>selectCategory(category) {
    this.category = category
  },
  </code></pre>
  
  <p>When user selects a category.</p>
  
  <p>I specified :key, tried different approaches but nothing worked, I always get the old list of subCategories.</p>
  
  <p>What could be the reason?</p>
  
  <p><strong>update</strong></p>
  
  <p>Vuex getter:</p>
  
  <pre><code>export const getClothingSubCategories = (state) =&gt; {
    return state.clothingSubCategories
  }
  </code></pre>
  
  <p>Component data:</p>
  
  <pre><code>data() {
      return {
        gender: 'female',
        category: null,
        subCategory: null,
        good: null,
  
        filters: {
          gender: 'female',
          clothing_subcategory_id: null
        }
      }
    },
  </code></pre>