Cloned slides in infinite mode is rendering without binded data

[ErriourMe]

Nuxt 2.16, vue-ssr-carousel 1.4.2 (PR #84 too).
I have slides with this content:

Code of carousel

<SsrCarousel
    ref="worksSlider"
    class="full-slider"
    v-bind="parameters"
 >
    <div v-for="(item, i) in data" :key="`work-item-${i}`">
        <WorkItem
          :title="item.title"
          :subtitle="item.room_types?.[0]?.title ?? ''"
          :image="`${$links.api}/api/v1/handler/resize/${item?.photos?.[0]?.id}?width=768`"
          :preview="`${$links.api}/api/v1/handler/resize/${item?.photos?.[0]?.id}?width=50`"
          :to="`/gallery/project/${item.id}`"
          card-class="works-scroll-block__card"
        >
          <div class="d-flex align-items-center justify-content-between">
            <div v-if="item?.price" class="recent-work__parameter mr-0">
              <span class="recent-work__parameter-value">
                {{ item.price }}
              </span>
              <span
                class="recent-work__parameter-icon ml-1"
                style="margin-top: -1px"
              >
                <SvgIcon sprite="outline" name="price" />
              </span>
            </div>
          </div>
        </WorkItem>
    </div>
</SsrCarousel>

Code of WorkItem component

<template>
  <div :class="`${noPadding ? `px-0` : ``} ${cardClass}`">
    <div class="recent-work">
      <NuxtLink :to="to" draggable="false" class="recent-work__goto">
          Explore work
      </NuxtLink>
      <div class="recent-work__image">
        <img
          ref="resent-work-image"
          width="768"
          height="768"
          :src="preview"
          :data-src="image"
          alt="Room image"
          class="lazyload"
        />
      </div>
      <div class="recent-work__content">
        <div class="recent-work__content-slot w-100">
          <slot />
        </div>
      </div>
    </div>
    <div
      class="d-flex justify-content-between align-items-center flex-wrap flex-md-nowrap mt-2 mb-3"
    >
      <div class="recent-work__data">
        <div class="recent-work__subtitle">{{ subtitle }} {{ cardClass }}</div>
        <div class="recent-work__title">{{ title }}</div>
      </div>
      <NuxtLink :to="to" class="btn btn-link flex-shrink-0">Show more</NuxtLink>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cardClass: {
      type: String,
      required: false,
      default: 'col-20 col-md-6 col-xl-4 col-xxl-4',
    },
    size: {
      type: Number,
      required: false,
      default: 4,
    },
    to: {
      type: String,
      required: false,
      default: '/',
    },
    noPadding: {
      type: Boolean,
      required: false,
      default: false,
    },
    title: {
      type: String,
      required: true,
    },
    subtitle: {
      type: String,
      required: false,
      default: '',
    },
    button: {
      type: String,
      required: false,
      default: '',
    },
    image: {
      type: String,
      required: true,
    },
    preview: {
      type: String,
      required: false,
      default: '',
    },
  },
}
</script>

It is assumed that left and right margins ("gutter" property) are added to the design so that the previous and next slides are visible.
But in infinite mode I'm getting cloned component without any data. Because of this, the previous slide takes data by default from the component, which affects the display of content. In my case, this is a slide shift to the left, which causes a void to appear, and blinking when scrolling.

Even if I remove the code col-20 col-md-6 col-xl-4 col-xxl-4 from the default prop data, which adds an indent, I will still get an unloaded image when the site first loads.

Images of current problem

How it is now:

How it must be:

This problem is also visible in the page source code:

I can't understand why it happens. This should to be fixed.
Thanks!

[weotch]

Have you tried using the peeking props to accomplish this? They are intended for this use case (showing part of the next and previous slides).

[ErriourMe]

Yes, of course. It can be seen in the first picture. But the problem is that invisible slides (clones) are not rendering components with all parameters inside if this slides are visible through these indents (via peek prop).

All parameters that I use:

Parameters

Data:

    parameters: {
        showDots: false,
        showArrows: true,
        center: true,
        gutter: 0,
        loop: true,
        slidesPerPage: 5,
        paginateBySlide: true,
        peek: 'var(--works-gutter)',
        responsive: [
          {
            maxWidth: 2100,
            slidesPerPage: 4,
          },
          {
            maxWidth: 1500,
            slidesPerPage: 3,
          },
          {
            maxWidth: 1200,
            slidesPerPage: 2,
          },
          {
            maxWidth: 768,
            slidesPerPage: 1,
          },
        ],
      },

Peek via SCSS:

.works-scroll-block {
  --works-gutter: 90px;
  @media (max-width: 1700px) {
    --works-gutter: 60px;
  }
  @media (max-width: 1200px) {
    --works-gutter: 30px;
  }
  @media (max-width: 600px) {
    --works-gutter: 10px;
  }
}

In any case, are the clones rendered incorrectly or is that what is planned?