vue v-model

HTML

<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<div id="app"></div>

JavaScript

Vue.component('test-base', {
  props: {
  	content: String
  },
  model: {
	  prop: 'content',
    event: 'change'
  },
  data() {
	  return {
    	localContent: this.content
    };
  },
  watch: {
  	content(val) {
    	if (val !== this.localContent) {
      	this.localContent = val;
      }
      
      console.log('base content change:', val);
    },
    localContent(val) {
    	this.$emit('change', val);
      console.log('base local content change:', val);
    }
  },
	template: '<div>base content: {{content}}<br><input v-model="localContent" /></div>'
});

Vue.component('middle', {
	props: {
  	content: String
  },
  model: {
	  prop: 'content',
    event: 'change'
  },
  watch: {
  	content() {
      console.log('middle content change:', this.content);
    }
  },
  beforeUpdate() {
  	console.log(this);
  },
  methods: {
  	handleChange(...args) {
    	this.$emit('change', ...args);
    }
  },
	template: '<div>middle content: {{content}}<br><test-base :content="content" @change="handleChange"></test-base></div>'
});

Vue.component('child', {
	data() {
  	return {
      content: ''
    };
  },
  watch: {
    content() {
      console.log('child content change:', this.content);
    }
  },
  created() {
  	console.log(this)
  },
	template: '<div>child content: {{content}}<middle v-model="content"></middle></div>'
});

new Vue({
	el: '#app',
  template: '<child />'
});