Vuejs2 从Laravel Api获取数据到Vue页面

我是vue.js的初学者，我正在尝试获取一个api结果并将其显示到我的vue页面。我的Api是用Laravel5.7构建的。 我刚刚安装了Vue axios包以与http一起使用

这是我的密码：

任务控制器

 public function index()
 {
    return response(Task::all()->jsonSerialize(), Response::HTTP_OK);
 }

App.vue

<template>
<div class="app-component">
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Task Title</th>
                <th>Priority</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <task-component v-for="task in tasks" :key="task.id" :task="task"></task-component>
           <tr>
               <td><input type="text" id="task" class="form-control"></td>
               <td>
                   <select id="select" class="form-control">
                       <option>Low</option>
                       <option>Medium</option>
                       <option>High</option>
                   </select>
                </td>
                <td><button class="btn btn-primary">Add</button></td>
            </tr>
        </tbody>
    </table>
</div>
</template>

<script>
import TaskComponent from './Task.vue';
export default{
    data(){
        return{
                tasks: [],
        }
    },

    methods: {
        getTasks(){
            window.axios.get('/api/tasks').then(({data})=>{
                data.forEach(task =>{
                this.tasks.push(task)
            });
          });
        },
        created(){
            this.getTasks();
        }
    },
    components:{TaskComponent}
}
</script>

身份证件
任务标题
优先
行动
低
中等
高
添加
从“/Task.vue”导入TaskComponent；
导出默认值{
数据（）{
返回{
任务：[]，
}
},
方法：{
getTasks（）{
get（'/api/tasks'）。然后（{data}）=>{
data.forEach（任务=>{
this.tasks.push（任务）
});
});
},
创建（）{
this.getTasks（）；
}
},
组件：{TaskComponent}
}

任务页

<template>
     <tr>
        <td>{{ task.id }}</td>
        <td>{{ task.title }}</td>
        <td>{{ task.priority }}</td>
        <td><button class="btn btn-danger">Remove</button></td>
    </tr>
</template>
<script>
export default{
    data(){
        return{
        }
    },
    props: ['task']
}   

</script>

{{task.id}
{{task.title}}
{{task.priority}}
去除
导出默认值{
数据（）{
返回{
}
},
道具：[“任务”]
}   

虽然控制器正确返回json数据，但我没有收到任何错误，但我的vue中没有显示任何结果

export default {
   methods: {},
   created() {}
}