JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
  <greeting :message="msg"></greeting>
</div>

<template  id="treeContainer">
<div>
	<h1>{{message.name}}</h1>
  <ul>
    <li>Location: {{message.location}}</li>
    <li>Temp: {{message.temp}}</li>
  </ul>
</div>
</template>

JavaScript

var bus = new Vue({});

Vue.component('greeting', {
    template: '#treeContainer',
    created(){
       bus.$on('data-updated', (message) => {
         this.message = message;
         this.$forceUpdate();
       })
    },
    data() {
    return{
      message : {}
      }
    }
});


var data = {
    note: 'My Tree',
   // name:"Hello World",
    children: [
      { name: 'hello' },
      { name: 'wat' }
    ]
}

function delayedUpdate(prop, val) {
   data[prop] = val;
   bus.$emit('data-updated', data);
}

var vm = new Vue({
    el: '#app',
    data:{
        msg:data
    },
    method:{ }
});

setTimeout(function(){ delayedUpdate('name', 'changed world') ;}, 1000)
setTimeout(function(){ delayedUpdate('location', 'foo') ;}, 1500)
setTimeout(function(){ delayedUpdate('temp', 'bar') ;}, 2000)