app.vue中的嵌套组件无法通过

// main.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    data: 'Hello from app.vue'
  },
  mutations: {
    updateData(state, newData) {
      state.data = newData
    }
  }
})

Vue.prototype.$bus = new Vue()

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

// app.vue
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$bus.$emit('data-updated', 'New data from app.vue')
    this.$store.commit('updateData', 'New data from app.vue')
  }
}
</script>

// child-component.vue
<template>
  <div>
    <p>{{ dataFromEvent }}</p>
    <p>{{ dataFromStore }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataFromEvent: '',
      dataFromStore: ''
    }
  },
  mounted() {
    this.$bus.$on('data-updated', newData => {
      this.dataFromEvent = newData
    })
    this.dataFromStore = this.$store.state.data
  }
}
</script>