Предотвратить прокрутку по умолчанию

У меня есть кнопка с событием щелчка, которым управляет мой асинхронный метод getComponents, в основном он показывает q-карту с данными, предоставленными моим API, проблема в том, что когда отображается карта, страница автоматически прокручивается вверх, и я не Мне не нужно такое поведение, я попытался поместить .prevent в событие или preventDefault в метод, и это не сработало, я использую Quasar Framework.

Как я могу это исправить?

Кнопка, отображающая карточку

<template>
  <ul class="q-mt-lg text-center">
    <li v-for="button in buttons" :key="button.id" class="q-mr-md">
      <q-btn outline rounded color='blue-10' :label="button.name" @click="getComponents(button.id)"/>
    </li>
    <component-card v-if="!isButtonPressed" :cards-info="componentsInfo" :description-info="descriptionComponent"/>
  </ul>
</template>

Метод:

async getComponents (categoryId) {
  this.componentsInfo = []
  this.isButtonPressed = true
  const PathCategory = `http://localhost:8000/api/v1.0/category/${categoryId}/`
  const PathProduct = 'http://localhost:8000/api/v1.0/product/'
  try {
    const responseCategory = await Axios.get(PathCategory)
    const responseProduct = await Axios.get(PathProduct)
    this.filterComponents(responseCategory.data, responseProduct.data)
  } catch (error) {
    console.error(error)
  }