Swiper init before method calling

[sergefy13]

Hey guys so the problem is that swiper initialize before I define breakpoints so swiper is not receive them. How can I solve it?

<template>
    <Swiper v-if="slides" class="pagination-equal h-96 flex flex-col justify-center items-center bg-gray-50 w-full" :keyboard="{ enabled: true}" :modules="[SwiperKeyboard, SwiperFreeMode, SwiperNavigation, SwiperAutoplay, SwiperPagination]" :speed="1000" :loop="true"
        :autoplay="{delay: 6000,disableOnInteraction: true, pauseOnMouseEnter: true, loop: true}" :pagination="{ bulletClass: 'pagination-line', bulletActiveClass: 'pagination-line-active', clickable: true }" :navigation="true" :space-between="50" :direction="'horizontal'"
        :breakpoints="this.breakpoints" @swiper="SwiperInit($event)">
        <SwiperSlide v-for="slide, sl_index in slides" :key="sl_index" class="flex flex-col justify-center items-center">
       CONTENT
      </SwiperSlide>
    </Swiper>
</template>


<script>
import axios from 'axios';
export default {
    props: {
        current: String,
        artcycle: Number
    },
    data() {
        return {
            token: 'token',
            slides: [],
            breakpoints: null
        }
    },
    methods: {
        SwiperInit(event){
            console.log(event)
        },
        setBreakpoints() {
            if (this.slides.length > 0) {
                this.breakpoints = {
                    1280: { slidesPerView: this.slidesPerView('xl') },
                    1024: { slidesPerView: this.slidesPerView('lg') },
                    768: { slidesPerView: this.slidesPerView('md') },
                    640: { slidesPerView: this.slidesPerView('sm') }
                };
                console.log(this.breakpoints)
            }
        },
        slidesPerView(screenSize) {
            const slidesAmount = this.slides.length;
            if (screenSize === 'xl') {
                return Math.min(4, slidesAmount);
            } else if (screenSize === 'lg') {
                return Math.min(3, slidesAmount);
            } else if (screenSize === 'md') {
                return Math.min(2, slidesAmount);
            } else if (screenSize === 'sm') {
                return Math.min(1, slidesAmount);
            }
            return 1;
        },
        async getQuery(request) {
            try {
                const response = await axios.get(request, {
                    headers: {
                        Authorization: `Bearer ${this.token}`
                    }
                });
                this.slides = response.data.data;
                
            } catch (error) {
                console.error(error);
            }
        },
        async getRequest() {
            const request = `http://localhost:1337/api/slider`;
            await this.getQuery(request);
        },
    },
    async beforeMount() {
        await this.getRequest();
    },
    async mounted() {
        await this.getRequest();
        this.$nextTick(() => {
            this.setBreakpoints(); 
        });
    },
}
</script>