This question is probably more about Webpack and ES6 import
than about Vue.
I'm writing a Vuex mutation that adds a new mykey: []
to an object in state
. This needs to use Vue.set(state.myobj, 'mykey', [])
, so that the new array gains reactiveness.
However, when I import Vue from 'vue'
to my mutations.js and use Vue.set(...)
it doesn't fix the problem (it just does nothing). The problem seems to be that Vue
is not the same Vue
that I use in my main js file when creating the Vue object in my main.js file.
I've verified that the problem is related to the way Vue is imported to mutations.js. If I write window.MY_VUE = Vue
in main.js and then use window.MY_VUE.set(...)
in mutations.js, the new array works as expected, i.e. when I push to the array, the changes are correctly reflected in DOM. Naturally, comparing window.MY_VUE === Vue
in mutations.js returns false.
Am I doing something wrong? What would be the correct way to fix the problem?
NB: As a workaround, I now replace the object:
state.myobj = { ...state.myobj, mykey: [] }
I'm using Vue 2.4.2, Vuex 2.4.0 and Webpack 2.7.0. I'm not using Webpack code-splitting.