How to remove last slide clipping in Owl Carousel Vue,js?

Question

Owl Carousel

Hello, there is a slider made using Owl Carousel under Vue.js and for some reason the last visible slide in it is cut off in width, as I understand that the width of all slides is calculated incorrectly, but I don’t understand why? Here is the code for the component itself

<template>
  <div class="gallery__wrap">
    <carousel
      :items="1"
      :dots="false"
      :nav="false"
      :loop="false"
      :autoHeight="false"
      :margin="0"
      @changed="changed"
      :responsive="{768:{items: visibleItemsCount,margin: 40}}"
    >
      <div class="gallery__item" :class="{ 'gallery__item--offset-left': itemClassOffset }" v-for="(image, index) in images" :key="index">
        <a href="#" class="gallery__link" @click.prevent="showPopup(image)">
          <img
            :data-src="image.src"
            :alt="alt"
            class="lozad gallery__img"
          />
        </a>
      </div>
    </carousel>
    <div class="custom-nav small" v-if="images.length > 1">
      <div class="custom-nav__prev" @click="prev">
        <svg
          width="17"
          height="9"
          viewBox="0 0 17 9"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M16.9913 4.57239L13.4689 0.987061V3.67606L0.259766 3.67606L0.259766 5.46873L13.4689 5.46873V8.15773L16.9913 4.57239Z"
            fill="#EEEEEE"
          />
        </svg>
      </div>
      <div class="custom-nav__next" @click="next" v-if="images.length > 1">
        <svg
          width="17"
          height="9"
          viewBox="0 0 17 9"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M16.9913 4.57239L13.4689 0.987061V3.67606L0.259766 3.67606L0.259766 5.46873L13.4689 5.46873V8.15773L16.9913 4.57239Z"
            fill="#EEEEEE"
          />
        </svg>
      </div>
      <div class="custom-nav__line">
        <div class="progress" :style="progress"></div>
      </div>
    </div>
    <doctorPhoto :images="images" :visible="isVisible" :index="imageId" @closed="isVisible = false" />
  </div>
</template>

<script>
import carousel from "vue-owl-carousel";
import doctorPhoto from "./doctor-photo";

export default {
  name: "gallery-photo",
  components: {
    carousel,
    doctorPhoto
  },
  props: {
    images: {
      type: Array,
      required: true
    },
    alt: {
      type: String,
      required: false
    }
  },
  methods: {
    changed(data) {
      if ( window.matchMedia("(max-width: 767px)").matches ) {
        this.currentStep = data.item.index + 1;
      }

       else if ( window.matchMedia("(min-width: 1500px)").matches ) {
            this.currentStep = data.item.index + 4;
        }

       else {
        this.currentStep = data.item.index + 3;
      }
    },

    next() {
      document.querySelector(this.parent + " .owl-next").click();
    },
    prev() {
      document.querySelector(this.parent + " .owl-prev").click();
    },
    showPopup(image) {
      this.imageId = image.index;
      this.isVisible = !this.isVisible;
    }
  },
  computed: {
    countOfSlides() {
      return this.images.length;
    },

    oneStep() {
      return 100 / this.countOfSlides;
    },

    width() {
      return this.currentStep * this.oneStep;
    },

    progress() {
      return "width: " + this.width + "%;";
    },
      visibleItemsCount() {
          if (window.matchMedia("(min-width: 1500px)").matches) {
              return 4;
          } else {
              return 3;
          }
      },
      itemClassOffset() {
        return window.matchMedia("(min-width: 1500px)").matches && this.countOfSlides <= 3 ? true : false;
      }
  },

  mounted: function() {
    for (let i = 0; i < this.images.length; i++) {
      this.images[i].index = i;
    }
    this.parent = "#" + this.$el.parentElement.id;
  },

  data: () => ({
    isVisible: false,
    currentStep: (window.matchMedia("(max-width: 767px)").matches == true) ? 1 : (window.matchMedia("(min-width: 1500px)").matches == true) ? 4 : 3,
    imageId: 1
  })
};
</script>

<style>
.owl-carousel {
  overflow: hidden;
}
</style>

and this is what the slider itself looks like cropped