Emit and listen in Vue 2

by observing

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="user-example">
  <p> {{user.name.fullname}} </p>
  <usercomp v-bind:user="user" 
  v-on:change-full-name="changeFullName"></usercomp>
</div>

JavaScript

Vue.component('usercomp', {
  template: `<div>
  <input v-model="user.name.firstname">
  <br>
  <input v-model="user.name.lastname">
  </div>`,
  props:['user'],
  computed: {
  	fullname: function() {
    	return this.user.name.firstname + ' ' + this.user.name.lastname;
    }
  },
  watch: {
    fullname: function (val) {
      this.$emit('change-full-name', val)
    }
  }
});

new Vue({
  el: '#user-example',
  data: function() {
  	return {
    	user: {
      	name: {
          fullname: '',
        	firstname: 'James',
          lastname: 'Holden',
        }
      }
    }
  },
  methods: {
    changeFullName: function (fullName) {
      console.log('asdf',fullName)
      this.user.name.fullname = fullName
    }
  }
})