vue 异步组件 传递数组问题

Question

A.html

 <x-header   v-bind:a="a"  ></x-header>

 var _vm = new Vue({
    el: '#app',
    data: {
      a:[
        {
          name: '首页',
          img: '../assets/images/menu.png',
          url: '../index/index.html',
          active: false
        }
      ]
    },
    mounted () {
        var _this = this;
         Vue.component("x-header", function (resolve,reject) {
                require(["text!../component/x-header.html"],function(html) {
                    resolve({
                      props: {  
                        a:Array
                      },
                      template: html
                })
            });
        });
    },
    methods: {
       
    }
});

b.html

<div>
   <div   v-for="(index,item) in a" >
              {{index}}--- {{item}} 
        </div>
</div>

实际输出结果却如下：
[--- 0
o--- 1
b--- 2
j--- 3
e--- 4
c--- 5
t--- 6
--- 7
O--- 8
b--- 9
j--- 10
e--- 11
c--- 12
t--- 13
]--- 14

Answer 1

这个应该是因为是从父组件传下来的a是一个'[object Object]'的字符串数据，还有遍历时应该写成：

   <div v-for="(item, index) in a" :key="index">
      {{index}}--- {{item}} 
    </div>

Answer 2

这样写似乎没有问题
https://jsfiddle.net/0td8ac73/1/

Answer 3

x-header为什么要放在mounted里面全局注册呢？直接放在外面全局注册就行了啊