JSFiddle - React, Tailwind, and code Playground

by Perry Kaufman

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <outer></outer>
</div>

<template id="outer">
  <div>
    <span>Child Data: {{data}}</span>
    <inner v-on:update="update"></inner>
  </div>
</template>

<template id="inner">
  <div>
    <input v-on:keyup="emitUpdate" v-model="data" type="text" />
  </div>
</template>

JavaScript

Vue.component('outer', { //Parent
  template: '#outer',
  data: function() {
    return {
      data: 'test'
    };
  },
  methods: {
    update: function(data) {
      this.data = data;
    }
  }
});

Vue.component('inner', { //Child
  template: '#inner',
  data: function() {
    return {
      data: 'default'
    };
  },
  methods: {
    emitUpdate: function() { //Update parent data
      this.$emit('update', this.data);
    }
  },
  mounted: function() {
  	//Initialize data in parent
  	this.emitUpdate();
  }
});

new Vue({
  el: '#app',
});