如何让VUE子组件识别AXIOS在VUE$root组件上完成加载?

我的小Vue应用程序的基本设置遵循基本Vue Cli 3设置:

• --应用程序.vue
• ---Navigation.vue(这个调用$root)

[...]
data() {
    return {
        navMainItems: null
        staticTestItems: [
            { "id": 0, "title": "test 1, "url": "/" },
            { "id": 1, "title": "test 2, "url": "/" }
        ]
    }
},
created() {
    axios.get('navigation/navAllItems.json')
        .then((response) => {
            this.navMainItems = response.data.navMainItems;
    [...]
}

很好。 现在我想使用“this.$root”调用Navigation.vue组件中的数据:

data(){
  return {
    navItems: null,
    localStaticTestItems: this.$root.staticTestItems
  }
},
created() {
    // Check if static elements loaded
    console.log("sampleNavItems =", this.$root.sampleNavItems)
},
mounted(){
  // This fails, presumably because of asynchonicity
  // Can this be fixed?
  this.navItems = this.$root.navMainItems
}

虽然静态元素加载得非常好,但异步加载的navitem不会更新。

我很清楚“事件总线”、“道具”或“VueX”等其他方法,但我不想使用$root组件的对话框,并学习如何对异步性做出反应-如果在这种情况下完全可能的话。