Рендеринг изображений с помощью Vue.js и Django

В настоящее время я создаю LMS, в которой администратор может загружать несколько изображений в урок. У меня есть некоторые проблемы с рендерингом этих изображений с помощью vue.js.

В моем models.py есть модель Photos, которая использует foreignkey для модели урока. В админке я могу добавлять изображения, но в html изображения отображаются как пустой список с номером id фотографии, например [4] В консоли я вижу массив photos с длиной фотографий в объекте урока, но не могу прикрепить его к фронтенду.

Вот шаблон vue:

Модели.py:

class Lesson(models.Model):
    DRAFT = 'draft'
    PUBLISHED = 'published'

    CHOICES_STATUS = (
        (DRAFT, 'Draft'),
        (PUBLISHED, 'Published')
    )

    ARTICLE = 'article'
    QUIZ = 'quiz'

    CHOICES_LESSON_TYPE = (
        (ARTICLE, 'Article'),
        (QUIZ, 'Quiz')
    )

    course = models.ForeignKey(Course, related_name='lessons', on_delete=models.CASCADE)
    title = models.CharField(max_length=255)
    slug = models.SlugField()
    short_description = models.TextField(blank=True, null=True)
    long_description = models.TextField(blank=True, null=True)
    status = models.CharField(max_length=20, choices=CHOICES_STATUS, default=PUBLISHED)
    lesson_type = models.CharField(max_length=20, choices=CHOICES_LESSON_TYPE, default=ARTICLE)


    def __str__(self):
        return self.title

class Photo(models.Model):
    lesson = models.ForeignKey(Lesson, on_delete=models.CASCADE, related_name='photos')
    photo = models.ImageField(upload_to ='lesson_images')

    # resizing the image, you can change parameters like size and quality.
    def save(self, *args, **kwargs):
       super(Photo, self).save(*args, **kwargs)
       img = Image.open(self.photo.path)
       if img.height > 1125 or img.width > 1125:
           img.thumbnail((1125,1125))
       img.save(self.photo.path,quality=70,optimize=True) 

А мой serializers.py:

class LessonListSerializer(serializers.ModelSerializer):
    # photo = PhotoSerializers(read_only=True, many=True)
    class Meta:
        model = Lesson
        fields = ('id', 'title', 'slug', 'short_description', 'long_description', 'photos')

Любая помощь в этом будет очень признательна!

<div class="column is-10">
    <template v-if="$store.state.user.isAuthenticated">
        <template v-if="activeLesson">
            <h2>{{ activeLesson.title }}</h2>
            
            {{ activeLesson.long_description }}
            <img v-for="(photo, index) in activeLesson.photos" :src="photo.url" :key="index" />

            <hr>