vue JS没有将更改从父级传播到组件

我是Vue Framework的新手.我试图在添加或删除属性时将更改从父级传播到子级,或者在稍后阶段在组件外部更新.在下面的代码片段中,我尝试编写一个组件,该组件根据节点的name属性显示问候消息,该节点作为属性从父节点传递.

如果节点在初始化时包含属性"name"(在下面的代码段中注释),则一切正常.但是如果在后面的执行阶段添加了name属性(这里为了演示目的,我添加了一个设置超时并应用了).该组件抛出错误,并且不会反映更改.我不知道如何传播组件中动态属性的更改,这些更改是基于组件外部的其他事件生成的.

基本上我想基于传递给它的属性以动态方式更新基于服务器响应显示不同类型小部件的组件.每当属性得到更新时,我希望组件自己更新.为什么双向绑定在Vuejs中无法正常工作？

Vue.component('greeting', {
    template: '#treeContainer',
    props: {'message':Object},
    watch:{
        'message': {
            handler: function(val) {
                console.log('###### changed');
            },
            deep: true
        }
    }
});

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

function delayedUpdate() {
    data.name='Changed World';
    console.log(JSON.stringify(data));
}

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

setTimeout(function(){ delayedUpdate() ;}, 1000)

Vue.set(data, 'name', 'changed world')

var bus = new Vue({});

bus.$emit('data-updated', data);

created(){
   bus.$on('data-updated', (message) => {
     this.message = message;
     this.$forceUpdate();
   })
}