vueでlaraveのapiをajaxで受け取りループで回したい

**コントローラーでjson形式の配列をreturnしajax通信で値を取得しループで回したいのですがうまく表示されません。開発ツールのNetwork見ると、tasksが入っており、中身の値もコントローラーで返した値と同じものです。statasも200なのでajax通信は成功している状態ですが、ここからの解決策がなかなか見つかりません。いいアドバイスをいただけたら嬉しいです。**laravel5.8を使っています

Task.List.vue

<template>
    <div class="container">
        <table class="table table-hover">
            <thead class="thead-light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">Title</th>
                <th scope="col">Content</th>
                <th scope="col">Person In Charge</th>
                <th scope="col">Show</th>
                <th scope="col">Edit</th>
                <th scope="col">Delete</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="task in tasks">
                <th scope="row">{{ task.id }}</th>
                <td>{{ task.title }}</td>
                <td>{{ task.content }}</td>
                <td>{{ task.person_in_charge }}</td>
                <td>
                    <router-link v-bind:to="{name: 'task.show', params: {taskId: task.id }}">
                        <button class="btn btn-primary">Show</button>
                    </router-link>
                </td>
                <td>
                    <router-link v-bind:to="{name: 'task.edit', params: {taskId: task.id }}">
                        <button class="btn btn-success">Edit</button>
                    </router-link>
                </td>
                <td>
              <button class="btn btn-danger" v-on:click="deleteTask(task.id)">Delete</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
const axios = require('axios');
    export default {
        data: function () {
            return {
                tasks: []
            }
        },
        methods: {
            getTasks() {
                var url = '/api/tasks';
                    axios.get(url)
                    .then(response =>{
                    console.log(response.data);
                    this.tasks = response.data; 
            })
                .catch(error => console.log(error))
            },
            deleteTask(id) {
                axios.delete('/api/tasks/' + id)
                    .then((res) => {
                        this.getTasks();
                    });
            }
        },
        mounted() {
            this.getTasks();
        }
    }
</script>
```


api.php
```
Route::get('/tasks', 'TaskController@index');
```

web.php

```
Route::get('/{any}', function() {
        return view('app');
     })->where('any', '.*');

```
router.js
```
  routes: [{
    path: '/tasks', 
    name: 'task.list',
    component: require('./components/TaskList.vue').default,props: true
  },
```


app.js
```
Vue.component('task-list', require('./components/TaskList.vue').default);
```