You can add @click.stop to stop event propagation. See more about Event Modifiers.

<VueSlickCarousel>
  ...
  <template #prevArrow>
    <button class="arrow-btn">
      <img
        src="@/assets/images/common/arrow-right.svg"
        alt="arrow-left"
        @click.stop>
    </button>
  </template>
  <template #nextArrow>
    <button class="arrow-btn">
      <img
        src="@/assets/images/common/arrow-right.svg"
        alt="arrow-left"
        @click.stop>
    </button>
  </template>
</VueSlickCarousel>

Updates

To disable click event from button (not only from img). You can do it with css:

.arrow-btn {
  pointer-events: none;

  img {
    pointer-events: all;
  }
}

But why not we just add @click.stop to button instead of img?

The problem is here:

...

arrow = this.prevArrow ? (
  this.prevArrow(option)[0]
) : (
  <button type="button" data-role="none" style="display: block;">
    Next
  </button>
)
...

mergeVNodeData(arrow, 'on', {
  click: () => {
   if (clickable) {
     this.$emit('arrowClicked', { message: this.type })
   }
  },
})

First it checks if you have passed the prevArrow slot, if so they will use your slot. If not, they will use the default button.

And either way, they will combine their default props/event handlers which include the 'click' event, meaning that your click will only be overridden.