This issue involves the interaction between Webpack, ES6 import syntax, and Vue.
Currently, I am working on a Vuex mutation that is responsible for adding a new key-value pair mykey: [] to an object within the state. To ensure reactivity, I need to use
Vue.set(state.myobj, 'mykey', [])However, importing Vue using import Vue from 'vue' in my mutations.js file and utilizing Vue.set(...) does not resolve the issue; it simply does nothing. It appears that the problem lies in the fact that the instance of Vue being used is different from the one created in main.js when initializing the Vue object.
After experimentation, I have confirmed that the problem stems from how Vue is imported into mutations.js. By assigning window.MY_VUE = Vue in main.js and then using window.MY_VUE.set(...) in mutations.js, the new array behaves as intended. However, running window.MY_VUE === Vue in mutations.js results in false.
Is there a correct way to address this issue? Am I making a mistake somewhere?
As a temporary solution, I currently replace the object:
state.myobj = { ...state.myobj, mykey: [] }
The environment consists of Vue 2.4.2, Vuex 2.4.0, and Webpack 2.7.0, with no utilization of Webpack code splitting.