JSFiddle - React, Tailwind, and code Playground

by Neha Dhiman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <greeting :user="currentUser"></greeting>
  <input v-model="currentUser" type="text"/>
  <br><br>IN PARENT: <h1>hi {{ currentUser }}</h1>
</div>

JavaScript

Vue.component('greeting', {
  props: ['user'],
  data:function(){
  	return {
      newuser:this.user
    }
  },
  template: '<h1>hi {{ newuser }}</h1>'
});

var vm = new Vue({
  el: '#app',
data () {
    return {
        currentUser: "Bob",
    }
},
mounted:function(){
	var self = this;
   setTimeout(function(){
   		self.currentUser = "john"
   },4000);
}
});