[Vuejs]-Update a child's data component to the father component in vue.js using .vue webpack(vue2)

Firstly, you need to make a copy of the prop and place in data and then bind to that using v-model because Vue doesn’t want you to directly change the prop from inside the component, so, inside the created hook simply copy the prop to an attribute in data:

export default{
  props: ['title'],
  created() {
    this.val = this.title
  },
  data() {
    return {
      val: ''
    }
  }
}

Then bind to it using v-model:

<input v-model="val">

You next step is to send the data back to the parent when the value changes, which you can do inside a watcher, simply watch val inside your change-title component and $emit it:

  watch: {
    val() {
      this.$emit('title-updated', this.val);
    }
  }

Then you can listen for that event in in your parent like so:

<change-title :title="title" @title-updated="updateTitle">

And finally add the updateTitle method to change the title in your parent:

  methods: {
    updateTitle(title) {
      this.title = title;
    }
  }

Here’s the JSFiddle for the entire thing: https://jsfiddle.net/90ws3sL6/