title: VueJs component not rendering inside a modal until I force a re-render by resizing the window
body: <p>I'm using &quot;Carousel-3d&quot; (imported it to the project globaly), like this</p>
  <pre><code>import Carousel3d from 'vue-carousel-3d'
  Vue.use(Carousel3d)
  </code></pre>
  <p>source : <a href="https://wlada.github.io/vue-carousel-3d/guide/" rel="nofollow noreferrer">https://wlada.github.io/vue-carousel-3d/guide/</a></p>
  <p>Then I tried to use it inside a modal</p>
  <h1>SingleStoreItem.vue file</h1>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;carousel-3d&gt;
               &lt;slide v-for=&quot;index in item.images.length&quot; :key=&quot;index-1&quot; :index = item.images[index-1].id&gt;
                     &lt;img :src=&quot;item.images[index-1].src&quot;&gt; 
               &lt;/slide&gt;
          &lt;/carousel-3d&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: &quot;SingleStoreItem&quot;,
      
      props: {
          item: Object
      },
  };
  &lt;/script&gt;
  </code></pre>
  <p>Where item is an object that is passed from a parent.</p>
  <p>The problem is that when I open the modal
  this shows up
  <a href="https://i.stack.imgur.com/6Bzbx.png" rel="nofollow noreferrer">Modal without the carousel rendered</a></p>
  <p>And when I slightly drag the window in order to resize it, the carousel appears <a href="https://i.stack.imgur.com/QG0rB.png" rel="nofollow noreferrer">Modal with the carousel rendered</a></p>
  <p>And This is how i do the modal and pass parameters to it.</p>
  <pre><code>&lt;b-modal :id=&quot;item.id&quot;  size='xl' centered ok-only :title=&quot;item.name&quot;&gt;
       &lt;SingleStoreItem
        v-bind:item=item
       /&gt;
  &lt;/b-modal&gt;
  </code></pre>