How to use computed property with getters and setters to trigger commit in Vuex

Question

I am using a computed property: category in an input field bound by v-bind like following:

  <select name="Category" :value="category">
    <option value="AC">AC</option>
    <option value="TV">TV</option>
    ...
  </select>

and I have getters and setter for this computed property as follows:

computed:{
    category: {
      get () {
        return this.$store.state.category
      },
      set (value) {
        console.log("Value of category changed")
        this.store.commit("SET_CAT", value)
      }
    }
}

But when I change input, setter does not get called, How can I achived this, or what other way can be to change state variable directly from HTML input field.

Here is fiddle for this.

Answer 1

This worked just by change v-bind to v-model in select.

<select name="Category" v-model="category">
  <option value="" disabled hidden>Select Product</option>
  ....

Here is working fiddle.

Please post answer if you feel there is still some better way to do it.