JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <p>Parent data:
    <input v-model="message">
  </p>
  <child v-bind:parent-data="message" v-on:erase="message = ''" v-on:set-text="setText">
</div>
<script type="text/x-template" id="childComponent">
  <div>
    <p>{{parentData}}</p>
    <button v-on:click="$emit('erase')">Erase</button>
    <button v-on:click="$emit('set-text', 'test')">Set text</button>
  </div>
</script>

JavaScript

Vue.component('child', {
  template: '#childComponent',
  props: ['parentData'],
  data: function() {
    return {
      internalData: ''
    };
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
  	setText(text) {
    	this.message = text;
    }
  }
})