Отображение элементов модели, сгруппированных по категориям, к которым они относятся (стиль доски kanbam), с использованием Django и Vue.js

Здравствуйте, надеюсь у вас все хорошо. Я работаю над приложением для канбан-доски с Django в качестве бэкенда и Vue.js. в качестве фронтенда. У меня есть 2 модели: Status и Items. Items содержит статус как внешний ключ из модели Status.

api/models.py

from django.db import models
from django.contrib.auth.models import User

class Status(models.Model):
    created_by = models.ForeignKey(User, related_name='status', 
    on_delete=models.CASCADE, null=True)
    status = models.CharField(max_length=50, null=True)

    def __str__(self):
        return self.status

class Items(models.Model):
    PRIORITY_CHOICES = (
       ("High", "danger"),
       ("Medium", "info"),
       ("Low", "primary"),
    )

    notes = models.CharField(max_length=255, null=True)
    status = models.ForeignKey(Status, null=True, blank=True, 
    on_delete=models.CASCADE)
    priority = models.CharField(max_length=15, null=True,choices=PRIORITY_CHOICES, default="2")
    start_date = models.DateField(null=True)
    end_date = models.DateField()
    created_at = models.DateTimeField(auto_now_add=True)
    created_by = models.ForeignKey(User, related_name='task', on_delete=models.CASCADE, null=True)

    def __str__(self):
        return self.notes

И я использую представления на основе классов в моем api/views.py views.py скриншот

api/serializers.py

from rest_framework import serializers
from .models import Items, Status


class ItemsSerializer(serializers.ModelSerializer):
    class Meta:
        model = Items
        read_only_fields = (
            'created_by',
            'created_at',
        )
        fields = 
        ('id','notes','status','priority','start_date','end_date')

class StatusSerializer(serializers.ModelSerializer):
    class Meta:
        model = Status
        read_only_fields = (
            'created_by',
        )
        fields = ('status','id','pk')

Проблема - я хочу отобразить элементы, созданные в моем приложении, в колонке, название которой Status.status, и под каждой колонкой я хочу отобразить все Items.notes (элементы представляют собой задачи, которые создает пользователь), которые содержат статус (Item.status), равный Status.status под этой колонкой в моем приложении vue.

На что я надеюсь: Канбабоард макет

Что я пробовал:

<template>
<div class="container">
    <div class="column is-12">
      <div class="buttons">
        <template v-if="statusList.length === 0">
          <button class="button is-primary is-light"> <router-link to="/dashboard/tasks/addStatus">Add Status</router-link></button>
        </template>
        <template v-else>
          <button class="button is-primary is-light"> <router-link to="/dashboard/tasks/addStatus">Add Status</router-link></button>
          <button class="button is-info is-light"><router-link to="/dashboard/tasks/add">Add Task</router-link></button>
        </template>
      </div>
    </div>
    <section class="section">
          <div class="content">
            <h4>My <code>Board</code></h4><hr>
            <div class="columns">
              <p v-if="tasks.length === 0">You have no boards yet.</p>
              <div class="column"


              v-for="status in statusList"
              v-bind:key="status.id">
                <div class="panel list-group">
                  <div class="panel-block list-group-item">
                    <h1 class="title">{{ status.status }}</h1>
                  </div>
                  <div class="panel-block list-group-item is-primary"
                  v-for="task in status.items_set.all"
                  
                    
                        v-bind:key="task.id"
                  >
                    <button class="delete"></button>
                                                              
                    <a><h3 class="subtitle">{{task.notes}}</h3></a>
                    <span class="tag is-danger m-3">{{task.priority}}</span>
                  </div>
                </div>
              </div>
              
            </div>
            
          </div>
        </section>
</div>

export default {
    name: 'Tasks',
    data() {
        return {
            tasks: [],
            statusList: [],
        }
    },
    mounted() {
        this.getTasks()
        this.getStatus()
    },
    methods: {
        async getTasks() {
            this.$store.commit('setIsLoading', true)
            
            axios
                .get('/api/v1/tasks')
                .then(response => {
                    this.tasks = response.data
                })
                .catch(error => {
                    console.log(error)
                })
            this.$store.commit('setIsLoading', false)
        },
        async getStatus() {
            this.$store.commit('setIsLoading', true)

            axios
                .get('/api/v1/status')
                .then(response => {
                    this.statusList = response.data
                })
                .catch(error => {
                    console.log(error)
                })

            this.$store.commit('setIsLoading', false)
        }
    }
}

Есть идеи о том, какую логику мне нужно реализовать, чтобы достичь этого. Любая помощь будет принята с благодарностью.

Дерево каталогов

class StatusSerializer(serializers.ModelSerializer):
    #task will group task items according to the status
    task = ItemsSerializer(many=True, read_only=True)

    class Meta:
        model = Status
        read_only_fields = (
        'created_by',
    )
        fields = ('status','id','pk','task')

<div class="panel-block list-group-item is-primary"
                  v-for="task in status.task"
                  v-bind:key="task.id"
                  >