Nuxt — компонент уже смонтирован, вместо этого используйте $fetch

У меня есть этот код

const redirectToPayment = async () => {
  const { data } = await useAsyncQuery(
    createCheckoutMutation,
    { variantId: product.value.productByHandle.variants.edges[0].node.id}
  );

  window.location.href = data.value.checkoutCreate.checkout.webUrl;
}

Я получаю следующее предупреждение

[nuxt] [useAsyncData] Компонент уже смонтирован, вместо этого используйте $fetch. См. https://nuxt.com/docs/getting-started/data-fetching

Я искал и читал, и кажется, что решение здесь, но я не могу заставить его работать в моем примере. Может ли кто-нибудь мне помочь? Спасибо

Редактировать/обновить ответ @Connor Я попытался переместить запрос за пределы щелчка мыши (обработчик событий), но все равно получаю то же предупреждение.

const data = await $fecth(
    createCheckoutMutation,
    { variantId: product.value.productByHandle.variants.edges[0].node.id}
  );