Vue+FW7 Store Arrays not reactive?

Questions
1

Thanks in advance for your help. After a bit of a research, including this forum – I am still not being able to make arrays reactive.

Here is my code – Home.vue is watching both followed_roster_ids (Array) and followed_roster_id (scalar). As I dispatch followRoster from a controller.vue component, the Home component only recognizes the scalar change. What am I doing wrong? Here’s the code:

// store.js:
const store = createStore({
  state: {
    followed_roster_ids: [],
    followed_roster_id: null,
  },
  actions: {
    followRoster({ state }, id) {
      console.log('Store Following ' + id)
      if (!state.followed_roster_ids.includes(id)) {
        state.followed_roster_ids.push(id);
      }
      console.log(state.followed_roster_ids) // ARRAY UPDATES CORRECTLY
      state.followed_roster_id = id; 
    }, 
  },
  getters: {
    followedRosterIds({ state }) {
      return state.followed_roster_ids;
    },
    followedRosterId({ state }) {
      return state.followed_roster_id;
    },
  }
})

// home.vue:
<script>    
  import { useStore } from 'framework7-vue'; 
  export default {
    name: 'Home',
    watch: {
      followed_roster_ids: function(data) {
        console.log('Caught change in Array: followed_roster_ids')  // DOES NOT FIRE
      },
      followed_roster_id: function(data) {
        console.log('Caught change: followed_roster_id')  // FIRES OK
      }
    },
    methods: {
    },
    components: {
    },
    data: function() {
      return {
        followed_roster_ids: useStore('followedRosterIds'),
        followed_roster_id: useStore('followedRosterId'),
      }
    }
  }
</script>

// controller.vue
import { useStore } from 'framework7-vue';
import store from '../js/store';
export default {
  name: 'TeamInformation',
  methods: {
    followRoster(id) {
      store.dispatch('followRoster', id)
    }
  }
}

Cheers!

2

Check example here:

To keep store reactive, state modification should be done with assignment.