Vue.js and Django multiple image rendering

I am having some major issues trying to render multiple images to my Vue.js frontend from a static folder in my Django project. I can get one image showing without issues but it does not seem to work for multiple images. My images are uploaded via the admin section of the app. Any help would be really appreciated I have spent days on this!!!!!

Here is my models.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)
    image = models.ImageField(upload_to='uploads/', blank=True, null=True)
   
    def __str__(self):
        return self.title


class LessonImage(models.Model):

    lesson_image = models.ForeignKey(Lesson, related_name='images', on_delete=models.CASCADE)
    image = models.ImageField(upload_to ='uploads/')

    def save(self, *args, **kwargs):
       super(LessonImage, self).save(*args, **kwargs)
       img = Image.open(self.image.path)
       if img.height > 1125 or img.width > 1125:
           img.thumbnail((1125,1125))
       img.save(self.image.path,quality=70,optimize=True)

    def get_images(self):
        if self.lesson_image:
            return settings.WEBSITE_URL + self.lesson_image.url

And my serializers.py. * Im not sure I needed to implement the image models in the serializers but I have tried this to test:

class LessonListSerializer(serializers.ModelSerializer):

    class Meta:
        model = Lesson
        fields = ('id', 'title', 'slug', 'short_description', 'long_description', 'images')

class LessonImageSerializer(serializers.ModelSerializer):
    class Meta:
        model = LessonImage
        fields = ('id', 'slug', 'lesson_image', 'get_images')

My vue template (section):

                    <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="(images, index) in activeLesson.images" 
                                  :src="get_images" :key="index" />
<script>
import axios from 'axios'
export default {
    data() {
        return {
            course: {},
            lessons: [],
            comments: [],
            activeLesson: null,
            errors: [],
            comment: {
                name: '',
                content: ''
            },
            // images:[],
        }
    },
    async mounted() {
        console.log('mounted')
        const slug = this.$route.params.slug
        await axios
            .get(`/api/v1/courses/${slug}/`)
            .then(response => {
                console.log(response.data)
                this.course = response.data.course
                this.lessons = response.data.lessons
            })
        
        document.title = this.course.title + ' | Relate'
    },
    methods: {
        submitComment() {
            console.log('submitComment')
            this.errors = []
            if (this.comment.name === '') {
                this.errors.push('The name must be filled out')
            }
            if (this.comment.content === '') {
                this.errors.push('The content must be filled out')
            }
            if (!this.errors.length) {
                axios
                    .post(`/api/v1/courses/${this.course.slug}/${this.activeLesson.slug}/`, this.comment)
                    .then(response => {
                        this.comment.name = ''
                        this.comment.content = ''
                        this.comments.push(response.data)
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        },
        setActiveLesson(lesson) {
            this.activeLesson = lesson
            this.getComments()
            this.get_lesson_images()
        },
        getComments() {
            axios
                .get(`/api/v1/courses/${this.course.slug}/${this.activeLesson.slug}/get-comments/`)
                .then(response => {
                    console.log(response.data)
                    this.comments = response.data
                })
        }
    }
}
</script>

And finally my admin.py:

class LessonImageAdmin(admin.StackedInline):
    model = LessonImage

class LessonCommentInline(admin.TabularInline):
    model = Comment
    raw_id_fields = ['lesson']



class LessonAdmin(admin.ModelAdmin):
    list_display = ['title', 'course', 'status', 'lesson_type']
    list_filter = ['status', 'lesson_type']
    search_fields = ['title', 'short_description', 'long_description']
    inlines = [LessonImageAdmin, LessonCommentInline]

    class Meta:
        model = Lesson

admin.site.register(Category)
admin.site.register(Course)
admin.site.register(Lesson, LessonAdmin)
admin.site.register(LessonImage)
admin.site.register(Comment)

Please help I have tried everything I know. This is the first project I have done using Vue.js and I’m not finding it very easy!