Error when calling and assigning variable with an api

[xjezzuuuu]

Hello,

I have the following problem, when I want to call an api to assign the data to the slides variable, the carousel always resets to the first one, unless I change the size of the window from the element inspector.

<template>
  <Carousel :autoplay="2000" :wrap-around="true" :breakpoints="breakpoints">
    <Slide v-for="slide in slides" :key="slide.id">
      <div class="carousel__item">
        <h3>{{ slide.id }}</h3>
        <p>{{ slide.content }}</p>
      </div>
    </Slide>

    <template #addons>
      <Navigation />
    </template>
  </Carousel>
</template>

<style>
.carousel__item {
  min-height: 200px;
  width: 100%;
  background-color: var(--vc-clr-primary);
  color: var(--vc-clr-white);
  font-size: 20px;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
}

.carousel__slide {
  padding: 10px;
}

.carousel__prev,
.carousel__next {
  box-sizing: content-box;
  border: 5px solid white;
}
</style>

<script>
import { defineComponent } from "vue";
import { Carousel, Navigation, Slide } from "vue3-carousel";
import ApiService from "@/core/services/ApiService";
import moment from "moment";
moment.locale("es");

import "vue3-carousel/dist/carousel.css";

export default defineComponent({
  //name: "Breakpoints",
  components: {
    Carousel,
    Slide,
    Navigation,
  },
  data: () => ({
    slides: null,
    newsletters: [],
    // carousel settings
    settings: {
      itemsToShow: 1,
      snapAlign: "center",
    },
    // breakpoints are mobile first
    // any settings not specified will fallback to the carousel settings
    breakpoints: {
      // 700px and up
      700: {
        itemsToShow: 3,
        snapAlign: "center",
      },
      // 1024 and up
      1024: {
        itemsToShow: 6,
        snapAlign: "center",
      },
    },
  }),
  async mounted() {
    ApiService.get("/newsletters")
      .then(({ data }) => {
        this.slides = data;
      })
      .catch(({ response }) => {
        console.log(response);
      });
  },
});
</script>