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"> \
   <label for="txtboxid">Middle Name *</label> \
</div> \
  ',
  props: [
      "id", "value"],
  watch: {
    value: function(newVal){
       this.$emit('input', newVal)
    }
  },
  mounted(){
     alert("in child's mounted " + this.$root.full_name)
  }
})

new Vue({
  el: '#app',
  data: {
    full_name: "Initial Val"    
  },
  beforeCreate(){
     alert("in parent's beforeCreate")
  }
})