If you use vuex, I recommend using mapGetters to get your items from the store. This will automatically monitor the value and re-render every time the item changes.

Here is the documentation: Documentation

Small example

shop

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
  data: ["Hello", "world"]
};

const mutations = {
  addItem(state, item) {
    state.data.push(item);
  }
};

const getters = {
  getData: (state) => state.data
};

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

Component

sssccc

The following is a codepen as an example: https://codesandbox.io/s/vuex-store-forked-bl9rk0?file=/src/components/HelloWorld.vue

If you want %E

Providing an answer may help others in the future.

I'm actually appending the object to an existing object in an array in the Vuex Store. Therefore, the watch cannot recognize the change. I changed it to vue.set and this worked for me.

Previously I used append to existing object:

identifiersNode.instanceData = payload.instanceData

Later I changed it to:

// Use the Vue reactive approach to add the instanceData object to existing object
Vue.set(identifiersNode, 'instanceData', payload.instanceData)

The following is my Vue component.