Vue Child => Parent

Reactive data passed as property.

HTML

<div id="vueRoot">
  <div>
    {{user}}
    <button @click="editing = true">
      Edit
    </button>
  </div>
  <edit-user :user="user" @save="onSave" @cancel="editing = false"></edit-user>
  <edit-user :user="user" @save="onSave" @cancel="editing = false"></edit-user>
</div>

JavaScript

Vue.component('edit-user', {
  template: `
  <div>
    <input type="text" v-model="localUser.name">
    <input type="text" v-model="localUser.address">
    <button @click="$emit('save', localUser)">Save</button>
    <button @click="$emit('cancel')">Cancel</button>
  </div>  
  `,
  props: ['user'],
  data() {
    return {
      localUser: Object.assign({}, this.user)
    }
  },
  watch:{
  	user(newUser){
    	this.localUser = Object.assign({}, newUser)
    }
  }
})


vm = new Vue({
  el: '#vueRoot',
  data: {
    editing: false,
    user: null
  },
  methods: {
    onSave(user) {
      this.user = user
      this.editing = false
    }
  }
})