How to disable slider arrows with a script on the outer slides of Vue-Slick?

Question

Slick

I just can’t think of a condition for how to remove the arrows from the extreme slides if the prop is forwarded with true.
Here is the component with the slider.
The catch is that there is a breakpoint and each has its own number of slides at a given resolution. Here also it is not clear as it dynamically to recalculate each time.

<template>
  <div class="slider-wrapper">
    <Slick
      @click.native="handleClick"
      ref="slick"
      :options="slickOptions"
      @init="handleInit"
      @beforeChange="handleBeforeChange"
      >
        <slot></slot>
    </Slick>
  </div>
</template>

<script>
import Slick from 'vue-slick';

export default {
  data() {
    return {
      currentSlide: 0,
      slideCount: 0
    }
  },
  props: {
    clickSlide: {
      type: Function,
      default: () => {console.log('default fn prop')}
    },
    slidesToShow: {
      type: Number,
      default: 4
    },
    nextArrow: {
      type: String,
      default: `<div class="arrow-wraper next"><img src="/img/common/arrow-right.svg"></div>`
    },
    prevArrow: {
      type: String,
      default: `<div class="arrow-wraper prev"><img src="/img/common/arrow-left.svg"></div>`
    },
    infinite: {
      type: Boolean,
      default: true
    },
    hideArrowEnd: {
      type: Boolean,
      default: false
    },
    responsive: {
      type: Array,
      default: () => ([
         {
           breakpoint: 992,
           settings: {
             slidesToShow: 3
           },
         },
         {
           breakpoint: 600,
           settings: {
             slidesToShow: 2
           },
         },
         {
           breakpoint: 500,
           settings: {
             slidesToShow: 1
           } 
         }
       ])
    }
  },
  computed: {
    slickOptions() {
      return {
       slidesToShow: this.slidesToShow,
       nextArrow: this.hideArrowEndNext && this.nextArrow,
       prevArrow: this.hideArrowEndPrev && this.prevArrow,
       swipeToSlide: true,
       infinite: this.infinite,
       responsive: this.responsive
        // Any other options that can be got from plugin documentation 
      } 
    },

    hideArrowEndNext() {
      return !(this.slideCount !== this.currentSlide && this.hideArrowEnd);
    },

    hideArrowEndPrev() {
      return !(this.slideCount !== 0 && this.hideArrowEnd);
    }
  },
  
  methods: {

    /* это приседание пришлось сделать так как через @click при infinite слайдера не навешваются события click,
      в обертку элемента слайдера надо добавлять data-slide-index="с номером индекса в массиве элементов"
    */
    handleClick({ target: t }) {
      const slickSlide = t.closest(".slick-slide");
      const mySlide = t.closest("div[data-slide-index]");
      if (slickSlide && mySlide) {
        const indexMySlide = mySlide.getAttribute('data-slide-index');
        this.clickSlide(indexMySlide);
      }
    },
    handleBeforeChange(event, slick, currentSlide, nextSlide) {
      this.currentSlide = nextSlide;
        console.log('handleBeforeChange', event, slick, currentSlide, nextSlide);
    },
    handleInit(event, slick) {
      this.currentSlide = slick.currentSlide;
      console.log('this.currentSlide: ', this.currentSlide);
      this.slideCount = slick.slideCount-1;
      console.log('this.slideCount: ', this.slideCount);
      console.log('this.hideArrowEnd: ', this.hideArrowEnd);
  },

  mounted(){

  },
  updated() {
console.log('this.hideArrowEndNext: ', this.hideArrowEndNext);
  },

  components: {
    Slick
  }
}
</script>

I saw a similar question here, but I don’t like the solution there, they offer somehow through a class that hangs a slider (I will have the possibility of infinite scrolling, but without these arrows, so that solution is all the more inappropriate)