Looping custom component inside swiper-slide not rendering content but renders structure

Looping custom component inside swiper-slide not rendering content but it renders the structure and swiper swiping works.

It works if I remove the swiper-slide around the component I wanted into the slide. But I think the library is not meant to be used without the swiper-slide correct me if I am wrong?

Also the directive for the library is not working!! So I cannot make my own structure.

This is what is going on:

<template>
  <swiper
    ref="productSlider"
    :options="swiperOptions"
    class="product-slider"
    @slideChange="onSlideChange"
  >
    <swiper-slide
      v-for="item in items"
      :key="item.id"
    >
      <product-slide :item="item" />
    </swiper-slide>
    <div
      slot="pagination"
      class="product-slider__pagination"
    />
  </swiper>
</template>
<script>
import 'swiper/dist/css/swiper.css';

import { swiper, swiperSlide } from 'vue-awesome-swiper';
import ProductSlide from './ProductSlide.vue';


export default {
  name: 'ProductSlider',

  components: {
    swiper,
    swiperSlide,
    ProductSlide,
  },

  props: {
    items: {
      type: Array,
      default: () => [],
      required: true,
    },
  },
  data() {
    const self = this;
    return {
      isQuickviewEnabled: false,
      swiperOptions: {
        direction: 'vertical',
        loopedSlides: 1,
        spaceBetween: 30,
        slidesPerView: 1,
        effect: 'fade',
        loop: true,
        mousewheel: {
          invert: false,
        },
        // autoHeight: true,
        pagination: {
          el: '.product-slider__pagination',
          clickable: true,
          dynamicBullets: true,
          dynamicMainBullets: 1,
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.productSlider.swiper;
    },
  },
  watch: {
    items(newValue, oldValue) {
      // if (this.swiper) {
      //   console.log(this.items);
      //   this.$nextTick(() => {
      //     this.swiper.loopDestroy();
      //     this.swiper.loopCreate();
      //   });
      // }
    },
  },
  methods: {
    onSlideChange() {
      console.log('Slide did change');
    },
  }
};
</script>

[artforteam2018]

i added this to swiper config and it works

on: {
    slideChange: function () {
        if (this.isEnd) {
            this.loopDestroy();
            this.loopCreate();
         }
        if (this.isBeginning) {
             this.loopDestroy();
             this.loopCreate();
         }
    }
},

[mohitnagarro]

@artforteam2015 Solution worked for me but I cannot perform any event on custom component.