JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <h2>{{ title }}</h2>
  <div class="pie">
    <change-title :title="title" @title-updated="updateTitle"></change-title>
  </div>
</div>

<template id="change-title">
  <div>
    <input v-model="val">
  </div>
</template>

JavaScript

Vue.component('change-title', {
  template: '#change-title',
  props: ['title'],
  created() {
    this.val = this.title
  },
  watch: {
    val() {
      this.$emit('title-updated', this.val);
    }
  },
  data() {
    return {
      val: ''
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    updateTitle(title) {
      this.title = title;
    }
  },
  data: {
    title: 'The title'
  }
})