coreui-vue - Vue Carousel not runs automatically?

I have used coreui-vue for the project, but the problem is with the carousel, a carousel isn’t started on page mount, interesting interval slide run’s when I resize screen size from inspecting elements, what is the problem?

Page:

<template>
  <CCarousel v-if="isLoaded" :interval="4000" transition="crossfade">
    <CCarouselItem :interval="4000">
      <img
        class="d-block w-100"
        src="https://coreui.io/vue/docs/4.0/images/vue.jpg"
        alt="slide 1"
      />
    </CCarouselItem>
    <CCarouselItem :interval="4000">
      <img
        class="d-block w-100"
        src="https://coreui.io/vue/docs/4.0/images/react.jpg"
        alt="slide 2"
      />
    </CCarouselItem>
    <CCarouselItem :interval="4000">
      <img
        class="d-block w-100"
        src="https://coreui.io/vue/docs/4.0/images/angular.jpg"
        alt="slide 3"
      />
    </CCarouselItem>
  </CCarousel>
</template>

<script>
import { CCarousel, CCarouselItem } from "@coreui/vue";
export default {
  components: {
    CCarousel,
    CCarouselItem,
  },
  data() {
    return {
      isLoaded: false,
    };
  },
  mounted() {
    this.isLoaded = !this.isLoaded;
  },
};
</script>

https://lh3.googleusercontent.com/cp4vwSeZMeb3MgIu1MeBcxUVyny46x6BW9CeUnWA4ex6jPYowGB_5jlrk21Mz6QGPpd0AvkWRR5fE6Uvek9p=w2880-h1592