Templates 无法使用vue js在模板中使用json数据

我无法在模板中正确传递json数据。我尝试了我找不到的任何方法。如果你想把所有的东西都放在一个片段里，我可以把它放进去。先谢谢你

我的HTML:

<div id="app">
 <cols :pops="pops"></cols>
</div>

var main = new Vue({
    el: '#app',
    data:{
        pops: [],
    },
    mounted: function () {
    var self = this;
    $.ajax({
    url: '../assets/data/pop.json',
    method: 'GET',
    success: function (data) {
        self.pops = data;
    },
    error: function (error) {
        console.log(error);
    }
    });
    },

同一文件（应用程序）

Vue.component（'cols'{
模板：
`
`，
});

错误

• 属性或方法“pops”未在实例上定义，但在渲染期间被引用

• “数据”选项应该是一个函数，它在组件定义中返回每个实例的值

---

您实际上并没有将数据属性传递给组件（以及其他组件）

在HTML中，尝试执行以下操作：

<div id="app">
 <headermain></headermain>
 <search></search>
 <cols :pops="pops"></cols>
</div>

---

在cols组件的pops属性中注入data.pops。

为什么在

组件中有这些属性

？尝试在不同论坛上找到的解决方案。。我是vue js的初学者。

<div id="app">
 <headermain></headermain>
 <search></search>
 <cols :pops="pops"></cols>
</div>