Javascript VueJS父/子通信-本地化

我正在开发一个本地化应用程序，其中根组件检索可在整个应用程序中使用的所有可用区域设置。获取区域设置后，它将广播此数据

我的子组件在使用这些区域设置时遇到一些问题。我做了一个小提琴，展示了我的一些/大部分问题：（子模板与父模板几乎相同-很抱歉这种难看的格式）

VueJS代码（可以在JSFIDLE链接上看到）

var Child=Vue.extend({
数据：{
所选语言：“”，
地区：[]，
someObject：{
someValue:{}
}
},
模板：'[Child]-奇怪的行为：{{locale.display{u name}}

{{locale.display{u name}}:{{someObject.someValue[locale.locale]}，
活动：{
set_locales:函数（数据）{
this.locales=数据；
this.selectedLanguage=data[0]['locale']；
}
}
});
var vm=新的Vue({
el:“#应用程序”，
数据：{
所选语言：“nl nl”，
地区：[
{
区域设置：“nl nl”，
显示名称：“荷兰”
},
{
地区：'en NL'，
显示名称：“英语”
}],
someObject：{
someValue:{}
},
},
就绪：函数（）{
this.$broadcast（'set_locales'，this.locales）；
},
组成部分：{
“我的组件”：子组件
},
})

似乎我正在广播的数据不能正常工作，但我不知道它是什么。在给定的示例中，父级（根级）按预期工作，但子级仅在用户填写一些数据后才稍微工作。即使在填写后，它也不能正常工作（语言选择上无值开关）

---

可能，我跳过了手册中的一个重要部分。如果有人能告诉我我做错了什么，我将不胜感激。

我不应该在我的孩子组件上使用广播，而应该使用道具。现在开始工作了

var Child = Vue.extend({
    data : {
    selectedLanguage : '',
    locales : [],
    someObject : {
      someValue : {}
    }
  },
  template: '<article><h3>[Child] - strange behaviour:</h3><select v-model="selectedLanguage"><option  v-for="locale in locales" v-bind:value="locale.locale">{{locale.display_name}}</option></select><br /><input v-model="someObject.someValue[selectedLanguage]"/><br /><div v-for="locale in locales">{{ locale.display_name}} : {{someObject.someValue[locale.locale]}}</div></article>',
  events: {
    set_locales : function(data) {
        this.locales = data;
      this.selectedLanguage = data[0]['locale'];
  }
}
});

var vm = new Vue({
    el: '#app',
    data: {
        selectedLanguage: 'nl-NL',
        locales : [
        {
            locale: 'nl-NL',
            display_name: 'Nederlands'
        },
        {
           locale: 'en-NL',
           display_name: 'English'
        }],
        someObject : {
            someValue : {}
         },
     },
     ready : function(){
        this.$broadcast('set_locales', this.locales);
     },

     components : {
        'my-component': Child
     },
})