vue组件通信，运行总是报错[Vue warn]: Error in event handler for "onballdrop": "TypeError: Cannot read property '0' of undefined"
学习模块化开发，没有使用vuex和vue-bus，这个地方卡了很久，求大神指教
main

new Vue({
  data: {
      eventBus: new Vue()
  },
  router: router.routers,
  components: { App },
  render: rout => rout(App)
}).$mount('#app');

carcontrol组件

<div class="add icon-add_circle" @click='addCart'></div>

methods: {
        addCart (event) {
            if (!event._constructed) {
                return
            }
            if (!this.food.count) {
                Vue.set(this.food, 'count', 1);
            } else {
                this.food.count++;
            }
            this.$root.eventBus.$emit('onballdrop', event.target);
            // console.log(this.$root.eventBus);
        }
}

shopcar组件

<transition-group 
        name='drop' 
        @before-enter='beforeEnter' 
        @enter='enter' 
        @after-enter='afterEnter'>
            <div class='ball' v-for='(ball, ballIdx) in balls' 
            v-show='ball.show' :key='ballIdx'></div>
        </transition-group>

data () {
        return {
            balls: [{
                show: false
            },{
                show: false
            },{
                show: false
            },{
                show: false
            },{
                show: false
            }],
            dropBalls: [],
        }
    },
created() {
        this.$root.eventBus.$on('onballdrop', this.dropped)
    },
    methods: {
        dropped(ev) {
            console.log(ev);
            for(let i = 0; i < this.balls.length; i++) {
                let ball = this.ball[i];
                if (!ball.show) {
                    ball.show = true;
                    ball.el = ev;
                }
                this.dropBalls.push(ball);
                return;
            }
        }