Valid display issue with v-for + vuex?

Question

Vue.js

There is a storage in which data can change at any time:

storage:

cars: [
                {
                    name: 'Debian',
                },
                {
                  name: 'Ss'
                },
                {
                   name: 'Gorsto'
                },
            ],

mutation:

deleteCarFromArray: (state, payload) => {
           state.cars[payload] = {InfoCreate: -1}
        },

getter:

carInfoGetter(store){
            return [...store.cars]
        }

In component:

computer:

filteredCards() {
      return this.$store.getters.carInfoGetter.filter((el) => {
        return el.InfoCreate !== -1 && el.InfoCreate !== -2;
      });

The cards themselves:

<div  v-for="(card, index) in filteredCards" :key="index.id">
...
</div>

The essence of the problem is that if some action occurs (mutation is called) - cards that do not change on the page in any way.
Cards that are NOT returned by the filteredCards filter should not appear, but now they remain in place and do not change in any way with some kind of mutation.
How to decide and why?

Answer 1

Vue 2 doesn't know how to listen for array changes by index. You either need to use array.splice or Vue.set .