Using v-model in text and textarea elements

Remember the two-way binding that we implemented with v-model to create custom input components in Chapter 5, Adding Vue Components? In the Creating custom input components section of that chapter, we learned that the v-model syntax for inputs – <input v-model="username"> – is shorthand for the following:

<input
  v-bind:value="username"
  v-on:input="username = $event.target.value"
>

This text input element, behind the scene, binds the value attribute that gets the value from a handler, username, which gets its value from the input event. And so, a custom text input component, too, must always use the value prop and the input event in the model property as follows:

Vue.component('custom-input', {
  props: {
    value: String
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  template: `<input v-on:input="$emit('input...