vue v-for does not update when vuex getter returns a new array

Question

I am trying to create a reactive array that is displayed to the screen using a v-for. The array is stored in a vuex state array and is retrieved by the vue component using a vuex getter. Inside a component, I can send a store commit to remove one of the day's inside of the array. The result should be an array with a size one smaller than before.

Removing an element from the array works fine and when I console.log the array in the vue component responsible for getting the array from the store, I can see that the correct array is returned, however, for some reason only the length of the v-for loop is updated and not data within the v-for loop. For example, the array in question is an array of strings which represents dates. What gets displayed on the screen is all of the dates minus the last date in the original array (after the mutation) where as the array in my state and in the console log shows the correct date missing.

Below is what I have for my code

VUEX Store:

const state = {
   activeDays: []
}

const getters = {
   getActiveDays: function (state) {
      return state.activeDays;
   }
}

const mutations = {
   removeDayFromActiveDays: function( state, day ) {
      const index = state.activeDays.indexOf(day);
      state.activeDays.splice(index, 1);
   }
}

Vue component:

<template>
   <div>
      <div v-for="day in activeDays">{{ day }}</div>
   </div>
</template>
<script>
//...
computed: {
   activeDays: function() {
      if (!this.$store.getters['getActiveDays']) {
         return null;
      }
      console.log("Active Days: " this.$store.getters['getActiveDays'])
      return this.$store.getters['getActiveDays']
   }
}
</script>

Answer 1

const mutations = {
  removeDayFromActiveDays: function(state, day) {
    state.activeDays = state.activeDays.filter(existingDay => existingDay !== day);
  }
};

<template>
  <div>
    <div v-for="day in activeDays" :key="day">{{ day }}</div>
  </div>
</template>
<script>
export default {
  computed: {
    activeDays: function() {
      return this.$store.getters['getActiveDays'] || [];
    }
  }
};
</script>

Can you try the code like this as well?