vuetify.js - v-select not properly synced with vuex store object and computed property

Question

I'm using a <v-select> tag like this:

In the component <template>, I have:

<v-select
  :value="bar"
  @change="update('foo.bar', $event)"
  :items="myItems"
  label="Bar"
/>

In the component <script>, I have:

export default {
  computed: {
    bar() {
      return this.user.foo?.bar
    },
  }
  methods: {
    update(path, value) {
      this.$store.dispatch('commitUser', { path, value })
    }
  }
}

In my store, I have:

export const state = () => ({
  user: {}
}

export const mutations = {
  USER_UPDATE(state, payload) {
    let levels = payload.path.split('.')
    const key = levels.pop()
    const propToChange = levels.reduce((res, level) => {
      if (!res[level]) this._vm.$set(res, level, {})
      return res[level]
    }, state.user)
    this._vm.$set(propToChange, key, payload.value)
  },
}

export const actions = {
  async commitUser({ commit }, payload) {
    commit('USER_UPDATE', payload)
  }
}

This code work pretty fine, however, when commit('USER_UPDATE', payload) is commented, then the store is not updated but the value shown in the select is not synced back to the store value.

How should be handled such issue ?

question from:https://stackoverflow.com/questions/65939741/v-select-not-properly-synced-with-vuex-store-object-and-computed-property

Answer 1

Waitting for answers