reuse using component

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <child v-model="full_name" id="24"></child>
  {{full_namE}}
</div>

JavaScript

Vue.component('child', {
  template: '\
   <div class="input-field col s12 m6 l6"> \
   <input :id="id" type="text" v-model="value" @input="updateParent"> \
   <label for="txtboxid">Middle Name *</label> \
</div> \
  ',
  props: [
      "id", "value"],
  methods: {
    updateParent: function(){
       this.$emit('input', this.value)
    }
  }
})

new Vue({
  el: '#app',
  data: {
    full_name: "Initial Val"    
  }
})