Запретить браузеру прокрутку вверх, когда карусель Bootstrap меняет слайд

У меня есть приложение VueJS со страницей, содержащей семь небольших каруселей (розовые прямоугольники - с использованием BootstrapVue). Каждая карусель содержит несколько слайдов (один продукт на слайд).

Ниже (зеленые прямоугольники) находится список различных комбинаций, которые можно создать (каждое зеленое поле представляет собой уникальную комбинацию).

Когда я нажимаю комбинацию, она устанавливает каждую карусель на правильный продукт / слайд. Проблема в том, что если вы нажмете одно из зеленых полей, чтобы установить комбинацию (это работает нормально), и страница прокручивается вниз, страница автоматически прокручивается до изменяющейся карусели. Я подозреваю, что способ, которым я устанавливаю слайд в карусели, заставляет его сфокусироваться и заставляет браузер прокручивать вверх (Firefox).

Вопрос: Как запретить браузеру прокрутку вверх, когда я нажимаю на одну из комбинаций? (Я бы хотел, чтобы браузер оставался в том же положении)

Шаблон для моей карусели выглядит так:

<template>
  <div class="b-capsule-layer">

    <b-carousel id="carousel1"
      ref="layerCarousel"
      :controls="showControls"
      :interval="0"
      v-model="slide"
      @sliding-start="onSlideStart"
      @sliding-end="onSlideEnd"
      @mouseenter.native="toggleHover"
      @mouseleave.native="toggleHover"
    >

      <b-carousel-slide
        v-for="(product, index) in sortedBySequence(layer)"
        class="p-3"
        :key="product.id"
        :img-src="product.image_urls[0]"
        :data-product-id="product.id"
        :data-product-index="index"
        v-on:click.native="clickProductSlide($event, product)"
      >
        <div class="brand">{{product.brand_name}}</div>
        <div class="price">{{ formattedPrice(product) }}</div>
      </b-carousel-slide>

    </b-carousel>
  </div>
</template>

В компоненте карусели у меня есть значение данных selectedProductId (каждый слайд - это отдельный продукт). У меня есть программа-наблюдатель для прослушивания изменений в selectedProductId, и если изменение было внесено, оно меняет карусель на правильный слайд.

Мой наблюдатель выглядит так:

watch: {
  layerProducts: function(newVal, oldVal) {
    this.setSelectedProduct();
  },

  selectedProductId: function(newVal, oldVal) {
    if ( newVal !== null || newVal == oldVal) {
      const el = document.querySelector(`[data-product-id='${newVal}']`);

      if (el && !el.classList.contains('active')) {
        this.slide = parseInt(el.dataset['productIndex']);
      }
    }
  }
}

Значение selectedProductId устанавливается, когда родительский компонент карусели вносит изменения в layerProducts (это изменение запускается в первом наблюдателе выше).