JSFiddle - React, Tailwind, and code Playground

by Simon Boddy

HTML

<div id="vueRoot">
{{user.name}}
<child :user='user'></child>
</div>

JavaScript

Vue.component('child',{
template :`
<div>
  {{user.name}}
  <button v-on:click='toggleName'>:-)</button>
</div>
`,
props:['user'],
methods:{
  toggleName:function(){
    if(this.user.name == 'simon')
      this.user.name = 'lorenzo';
    else
      this.user.name = 'simon';
  }
}
})


vm = new Vue({
el : '#vueRoot',
data : {user:{name:'simon', mood:'outraged'}}
})