VueX mutation works, but component computed property doesn't

Question

I've read a lot of questions and answers with regard to this problem, but I don't seem to be doing any of the issues described before.

I have moved to using modules for my states, but after setting everything up, I can see that both local state of the store module and the getter gets updated. But the computed property doesn't. I cannot figure out why the hell it is happening, so here I am looking for help.

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import base_states from './modules/base_states'
import dialogs from './modules/dialogs'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    base_states,
    dialogs,
  },
})

dialogs.js

// initial state
const state = {
  signInModalDialogComponent: 'signOn',
  attendanceModalDialogComponent: 'AttendanceDetails',
  dialogSignInVisible: false,
  dialogDonationVisible: false,
}

// getters
const getters = {
  signInModalDialogComponent: state => state.signInModalDialogComponent,
  attendanceModalDialogComponent: state => state.attendanceModalDialogComponent,
  dialogSignInVisible: state => state.dialogSignInVisible,
  dialogDonationVisible: state => state.dialogDonationVisible,
}

// actions
const actions = {}

// mutations
const mutations = {
  changeComponent(state, data){
    state.signInModalDialogComponent = data
  },
  changeAttendanceComponent(state, componentName){
    state.attendanceModalDialogComponent = componentName
  },
  toggleSignInVisibility(state, data){
    state.dialogSignInVisible = data
  },
  changeDonationVisibility(state, data){
    state.dialogDonationVisible = data
  },
}

export default {
  state,
  getters,
  actions,
  mutations
}

component (I took out a bunch of code, which is not related)

<template lang="pug">
...
    el-dialog(width='300px', :visible.sync='dialogSignInVisible')
      component(
        :is='signInModalDialogComponent',
        @componentchanged='dialogComponent = $event'
      )
</template>

<script type="text/javascript">
  import { mapGetters, mapMutations } from 'vuex';
  export default {
    computed: {
      ...mapGetters([
        'dialogSignInVisible',
        'signInModalDialogComponent',
      ]),
    },
    methods: {
      ...mapMutations([
        'toggleSignInVisibility'
      ]),
    }
  }
</script>

Specifically, I am looking at dialogSignInVisible which doesn't change. As you can see from the dev tools, mutation goes through and changes both the local state and getter. But when I look at the component, the computed vuex binding doesn't change.

Answer 1

The problem was that I was using a different Vue executable, in my store vs my webpack pack.

I use import Vue from 'vue/dist/vue.esm' everywhere, but in store I used import Vue from 'vue'. After making sure they are the same, everything worked without problems.