Bug: Slide component does not load when carousel's parent component is imported 0.6.8

Hello, I ran into an odd issue where the Carousel doesn’t display until I click on where the slide would be or trigger a pageChange by clicking on a pagination icon. Even stranger is that the elements are all there in the markup, but they won’t display until i click in the general area of the slider.

This only seems to occur when I import the components into another component that is being imported as well.

import Vue from 'vue'
import ProductOverview from './components/product-overview.vue'

const app = document.getElementById("app")

new vue({
  el: app,
  template: "<ProductOverview />",
  components: { ProductOverview }
})

<template>
<div class="product">
  <product-images></product-images>
  <product-form></product-form>
</div>
</template>

<script>
import ProductImages from "./product-images.vue";
import ProductForm from "./product-form.vue";

export default {
  components: {
    ProductImages,
    ProductForm
  }
};
</script>
  

<template>
  <carousel>
    <slide>
      <img src="https://placehold.it/600x400">
    </slide>
    <slide>
      <img src="https://placehold.it/600x400">
    </slide>
  </carousel>
</template>

<script>
import { Carousel, Slide } from "vue-carousel";

export default {
  components: {
    Carousel,
    Slide
  }
};
</script>

Here are some screenshots as well.

I click on one of the pagination circles:

[deakpal]

I had the same problem, and my solution is:

mounted() {
  setTimeout(() => {
    this.$refs['carousel'].onResize();
    this.$refs['carousel'].goToPage(0);
  }, 200);
}

[DavidVII]

@nchlodzi indeed an unfortunate bug, but I believe this may be solved with #172. However, I’m not entirely sure.

I was able to get some results with by setting the VueCarousel-slide style to this:

.VueCarousel-slide {
  visibility: visible;
  flex-basis: 100%;
  width: 100%;
}

Try that instead of the VueCarousel-inner

It’s a workaround, but it should display the slides by default with that.