Why does swiper loop duplicate slides with no content?

Question

Vue.js

I have such a vue component. It accepts data from json with an array of objects with data for each slide.
The slider includes the functionality of infinite scrolling. I applied the wrapper plugin vue-awesome-swiper. Everything renders correctly until I turn on the loop: true parameter.
Infinite scrolling slides (swiper-slide-duplicate) are copied without content inside. What does both frontStage and backStage have to do with it. Initializing by watch content.slides didn't help me.
Component code.
Tell me, please, what am I doing wrong? loop is essential

<script lang='coffee'>
  Vue = require "vue/dist/vue.js"
  Swiper = require "swiper"
  mainslider = Vue.component "mainslider",
    props: ['content']

    data: ->
      return {
        frontSliderOption: {
          observer: true
          parallax: true,
          init: false
          slideToClickedSlide: true
          slidesPerView: 'auto'
          loopedSlides: 0
          loop: true
          centeredSlides: false
          hashNavigation:
            replaceState: true
          pagination:
            el: ".swiper-pagination",
            type: 'fraction',
            speed: 500
        },
        backSliderOption: {
          observer: true
          slidesPerView: 1
          effect: 'fade',
          speed: 500,
          init: false,
          loop: true
          loopedSlides: 0
        }
      }
    computed:
      backStage: ->
        return this.$refs.backStage.swiper

      frontStage: ->
        return this.$refs.frontStage.swiper


    watch:
      "content.slides": (newVal, oldVal) ->
        this.frontSliderOption.loopedSlides = newVal.length
        this.backSliderOption.loopedSlides = newVal.length
        this.backStage.init()
        this.frontStage.init()

    created: ->
      if window.innerWidth >= 960
        this.frontSliderOption.centeredSlides = true

    mounted: ->
      front = this.frontStage
      back = this.backStage
      front.on "slideChange", ->
        back.slideTo front.activeIndex
        scrollToTop = ->
          window.scrollTo(0, window.pageYOffset - 20)
          if window.pageYOffset > 1
            requestAnimationFrame(scrollToTop)
        requestAnimationFrame(scrollToTop)




  module.exports = mainslider
</script>
<template>
  <div class="slider mainframe__slider j-main-slider">
    <div class="slider__back">
      <swiper :options='backSliderOption' ref='backStage' class="swiper-container j-main-slider__back slider__container">
        <swiper-slide v-for='slide in content.slides' class="swiper-slide slider__slide">
          <div class="slider__slide-pic" :style="{'background-image':'url('+slide.background+')'}"></div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="slider__front">
      <swiper :options="frontSliderOption" ref='frontStage'>
        <swiper-slide v-for='(slide, index) in content.slides' class="swiper-slide slider__slide-front" :data-hash="slide.hash">
          <div class="featured">
            <div class="featured__plate column-xs">
              <div class="featured__pre-head j-main-slider__pre-head slider__pre-head">
                <div>{{slide.preHead}}</div>
              </div>
              <div class="featured__fraction-sm-more" data-swiper-parallax="-100%" data-swiper-parallax-opacity="0"><span class="index">{{index + 1}}</span><span class="delimeter"> слайд из </span><span class="total">{{content.slides.length}}</span></div>
              <div class="featured__title" data-swiper-parallax="-150%" data-swiper-parallax-opacity="0">{{slide.title}}</div>
              <div class="featured__description" data-swiper-parallax="-150%" data-swiper-parallax-opacity="0">{{slide.desc}}</div>
              <div class="featured__crumbs-sm-more crumbs" data-swiper-parallax="-150%" data-swiper-parallax-opacity="0">
                <div class="crumbs__title">На этой странице:</div>
                <div class="crumbs__row">
                  <div class="crumbs__item" v-for='item in slide.crumbs'>{{item}}</div>
                </div>
              </div><a class="featured__more-xs" href="javascript:void(0)">
              <div v-if='slide.announce === false' v-html='content.moreIcon'></div>
              <span>{{slide.moretext}}</span></a>
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-pagination slider__fraction-xs j-main-slider__fraction" slot='pagination'></div>
      </swiper>
      <div class="j-main-slider__slide-line slider__slide-line-xs"></div>
    </div>
  </div>

</template>

Answer 1

there it seems that the point is that it makes a duplicate of only an element in the DOM, so the logic does not work. I'm now faced with the same thing, only it's easier for me - scrolling on the button does not work. while looking for a solution