Vue не отображает результаты из данных Django Rest API

Я работаю над совершенно новым проектом, используя Vue и Django Rest Framework. Я настроил API и получаю данные по мере необходимости. Однако у меня возникла проблема с отображением результатов v-for loop. Есть причины или идеи, почему у меня не отображаются результаты?

---

Здесь представлен код vue.js (GetTasks.vue)

<template>
    <div class="tasks">
        <BaseNavbar />
    </div>
    <div v-for="tasks in APIData" :key="tasks.id" class="container">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <h5 class="card-title">{{tasks.task}}</h5>
                    <p class="card-text">{{tasks.details}}</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
</template>

<script>
import { getAPI } from '../axios-api'
import BaseNavbar from '../components/BaseNavbar.vue'
export default {
    name: 'GetTasks',
    data () {
        return {
            APIData: []
        }
    },
    components: {
        BaseNavbar,
    },
    created () {
        getAPI.get('/tasks/',)
        .then(response => {
            console.log('Task API has recieved data')
            this.APIData = response.APIData
        })
        .catch(err => {
            console.log(err)
        })
    }
}
</script>

Django модель

class Tasks(models.Model):
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    task = models.CharField(max_length=200)
    details = models.CharField(max_length=500)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateField(auto_now=True)

Вернуться на верх