Use of v-model and v-for with array in Vuex state

Question

I'm building the tabs for a tabbed interface, in which the user can change the titles of the tabs. What I'd like to do is something like this:

Markup:

<div class="tabs" v-for="(tab, tabIndex) in tabs" :key="tab.id" >
  <input type="text" v-model:value="tabs(tabIndex)">
</div>

Computed property:

computed: {
  scenes2: {
    get(tabIndex){
      return this.$store.state.tabs[tabIndex].title
    },
    set(value, tabIndex){
      this.$store.dispatch('setTabTitle', {value: value, tabIndex: tabIndex} )
    },
  },
},

This doesn't work, of course. What is the proper way to use v-model here so that I can correlate the v-model with the relevant index on the tabs array in the Vuex state?

Answer 1

I wouldn't use computed properties with arrays and objects.

 <div class="tabs" v-for="(tab, tabIndex) in $store.state.tabs" :key="tab.id">
   <input type="text" :value="tab.title" @input="e => updateTabTitle(tabIndex, e)">
 </div>

methods: {
  updateTabTitle(tabIndex, event) {
    this.$store.dispatch('setTabTitle', {value: event.target.value, tabIndex} )
  }
}