Reactivity removed on refresh

I am having trouble with my store elements not continuing to be reactive after refreshing the page. My state to start is empty such that:

const state = {
  items: [],
};

I then am using axios to get information from an API and then pushing objects into this array. Below is my mutation:

loadData(state, response) {
    response.items.forEach(function(item) {
      state.items.push(item);
    });
    // Vue.set(state, 'items', response.items);
  },

When I inspect this property in the console, I can see that the reactive getters and setters are added onto these objects within the array. However, when I refresh the page and inspect these objects, the array is reactive but the actual objects are not.

How can I fix this without having to manually go through and fix this on every single module? (I tried to do a global Vue.set() on the state, but that didn’t fix it either.)

[izziaraffaele]

I had the same issue but I wasn’t able to find a working solution so I decided to switch to Vuex-persistedstate which does not have this issue and provides almost the same functionalities as this package.

[fdabek1]

For anybody that is struggling with this same issue, I just implemented a quick recursive function that solves this solution for now. This is basically a hack so I am hoping that there is a better way to overcome this.

function makeReactive(state) {
  if (typeof state !== 'object') return;

  Object.keys(state).forEach(function (key) {
    if (state[key] !== null && state[key] !== undefined) {
      Vue.set(state, key, state[key]);
      makeReactive(state[key]);
    }
  });
}

export const actions = {
  initial({rootState}) {
    makeReactive(rootState);
  },
};

Just call the action as the first thing on the load of the page.