Using v-model in select elements

Not surprisingly, v-model select input elements always bind the value attribute with a handler for getting its selected value on the change event, as in the following example:

<select
  v-model="favourite"
  name="favourite"
>
  //...
</select>

The preceding v-model checkbox input element is just another shorthand for the following:

<select
  v-bind:value="favourite"
  v-on:change="favourite = $event.target.value"
  name="favourite"
>
  //...
</select>

And so, a custom checkbox input element, too, must always comply with the nature of the v-model element by using the value prop and the change event in the model property as follows:

Vue.component('custom-select', {
  props: {
    value: String
  },
  model: {
    prop: 'value',
    event: 'change'
  }
})

As you can see, v-model is syntactic sugar on top of v-bind, which binds a value to the markup, and v-on, which...