In VueJS, use a computed property setter as an easy way to pass down v-model within your component without using watchers.

TextInput.vue

<template>
  <div class="form-group">
    <label :for="uid"><slot></slot></label>
    <input :id="uid" type="text" v-model="innerValue">
  </div>
</template>

<script>
/**
 * Custom text input component
 * @example 
 * <TextInput v-model="fields.name">First Name</TextInput>
 */
 export default {
   props: {
    // passed in with v-model
    value: {
      type: String,
      default: ''
    }
   },
   
   computed: {
    // allows us to use v-model within this component
    innerValue: {
      get () {
        return this.value;
      },
      set (newVal) {
        this.$emit('input', newVal);
      }
    }
   },
   
   beforeCreate () {
    // create a unique ID to tie labels and inputs together without
    // having to manually set the id through a prop
    this.uid = `TextInput-${Math.random().toString(36).slice(2, 12)}`;
   }
 }
</script>