https://stackoverflow.com/questions/53374525/vuex-computed-property-based-on-a-modules-state-does-not-update-on-dispatch

computed: {
  message: {
    get () {
      return this.$store.state.message
    },
    set (newValue) {
      return this.$store.dispatch('setMessage', newValue)
    }
  }
}

I love this because it’s easy to see what happens when you get or set the value. It’s nicely grouped together and easy to understand what’s going on.

However when it comes to the store, I have the problem that there is a high separation of the related functions if you try to set it up as recommended:

the recommended Vuex setup

state: {
  message: '',
  // other state
},
getters: {
  message: (state) => {
    return state.message
  },
  // other getters
},
mutations: {
  SET_MESSAGE: (state, newValue) => {
    state.message = newValue
  },
  // other mutations
},
actions: {
  setMessage: ({commit, state}, newValue) => {
    commit('SET_MESSAGE', newValue)
    return state.message
  },
  // other actions
}