vue mouseover or hover is not working on ipad

Question

In my application, there are some cards which can be scrollable left to right by using left/right paddles. These paddles are visible when we mouseover on cards.

Now, This is working fine on desktop in all browser(safary,firefox,chrome). Even if i change the responsive design it is working fine.

Problem is visible when we use ipad(ios simulator). Those paddles are visible while hovering over those cards. Paddles are coming if we click on those cards first.

Div layout

    <div
              v-show="grid"
              class="second-row"
              @mouseover="showPaddle"
              @scroll.passive="setScrolledLeft"
            > .... normal code 
</div>

showPaddle method

showPaddle() {
  const secondRowEl = this.$el.querySelector('.second-row');
  const gridWidth = this.$el.querySelector('.grid').clientWidth;
  const scrollMax = gridWidth - secondRowEl.clientWidth;
  if (gridWidth > secondRowEl.clientWidth) {
    if (secondRowEl.scrollLeft > 0 && secondRowEl.scrollLeft < scrollMax) {
      this.showLeftPaddle = true;
      this.showRightPaddle = true;
    } else if (secondRowEl.scrollLeft >= scrollMax) {
      this.showLeftPaddle = true;
      this.showRightPaddle = false;
    } else if (secondRowEl.scrollLeft <= 0) {
      this.showLeftPaddle = false;
      this.showRightPaddle = true;
    }
  } else {
    this.showLeftPaddle = false;
    this.showRightPaddle = false;
  }
}

This code and everything is working fine on all browser in desktop/laptop but not working in ipad(ios simulator).

Please tell me any workaround on this.