VueJs component not rendering inside a modal until I force a re-render by resizing the window

Question

I'm using "Carousel-3d" (imported it to the project globaly), like this

import Carousel3d from 'vue-carousel-3d'
Vue.use(Carousel3d)

source: https://wlada.github.io/vue-carousel-3d/guide/

Then I tried to use it inside a modal

SingleStoreItem.vue file

<template>
    <div>
        <carousel-3d>
             <slide v-for="index in item.images.length" :key="index-1" :index = item.images[index-1].id>
                   <img :src="item.images[index-1].src"> 
             </slide>
        </carousel-3d>
    </div>
</template>

<script>
export default {
    name: "SingleStoreItem",
    
    props: {
        item: Object
    },
};
</script>

Where item is an object that is passed from a parent.

The problem is that when I open the modal this shows up Modal without the carousel rendered

And when I slightly drag the window in order to resize it, the carousel appears Modal with the carousel rendered

And This is how i do the modal and pass parameters to it.

<b-modal :id="item.id"  size='xl' centered ok-only :title="item.name">
     <SingleStoreItem
      v-bind:item=item
     />
</b-modal>

Answer 1

I believed your Modal trigger somehow affected the lifecycle of your SingleStoreItem.vue

As there's lacking code of your snippets esp. <script> in component, pretty much afraid we can't help much.

but likely you need to deal with:

• parent's mounted or method hooks

mounted () {
    this.$nextTick(function () {
    // // Code that will run only after the
    // // entire view has been re-rendered
    })
  },