title: Vue v-for not rendering shadow correctly in slide
body: <p>I am trying to use <a href="https://idangero.us/swiper/" rel="nofollow noreferrer">iDangero.us</a> Swiper in my Vue project. Everything is working fine except the shadow in slide. After every pagination the shadow goes bigger and bigger and darker. After the circle is over and I am back at <strong>second</strong> slide the shadow resets itself to normal again.</p>
  
  <p>Here is illustration, what is going on:</p>
  
  <p><a href="https://i.stack.imgur.com/11MJj.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/11MJj.gif" alt="enter image description here"></a></p>
  
  <p>This is what I am doing:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="product-slider"&gt;
      &lt;div class="product-slider__wrp swiper-wrapper"&gt;
        &lt;product-slide :item="item" v-for="item in items" :key="item.id"/&gt;
      &lt;/div&gt;
    &lt;div class="product-slider__pagination"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  
  
    data() {
      return {
  
        swiperOptions: {
          vertical: true,
          spaceBetween: 30,
          effect: 'fade',
          loop: true,
          mousewheel: {
            invert: false,
          },
          // autoHeight: true,
          pagination: {
            el: '.product-slider__pagination',
            clickable: true,
          }
        },
      };
    },
  
    mounted(){
      const swiper = new Swiper('.product-slider', {
        spaceBetween: 30,
        effect: 'fade',
        loop: true,
        mousewheel: {
          invert: false,
        },
        // autoHeight: true,
        pagination: {
          el: '.product-slider__pagination',
          clickable: true,
        }
      });
      swiper.slideTo(3, 1000, false)
    },
  </code></pre>
  
  <p>This is the slide component:</p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="product-slider__item swiper-slide"&gt;
  
    &lt;div class="product-slider__img"&gt;
      &lt;inner-slick-slider :images="item.imageUrl" :imageTitle="item.title | decrypt"/&gt;
    &lt;/div&gt;
  
    &lt;div class="product-slider__content"&gt;
      &lt;span class="product-slider__code"&gt; test &lt;/span&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>And this is the shadow on the slide component: <code>box-shadow: 4px 13px 30px 1px rgba(112, 137, 249, 0.2);</code></p>
  
  <p>I tried everything I could find from google. Also tried to re-render on updated and beforeUpdate etc.. What I am doing wrong? Any help is much appreciated!</p>