Estoy tratando de hacer una llamada asíncrona para obtener datos de mi base de datos de Fauna. Pero no puedo hacer que se active la llamada asíncrona.

Dentro de la función setup() tengo console.log("Setup is working"); y eso funciona como se esperaba. Se muestra en la carga de la página.

Luego, dentro de la función asíncrona de callApi , tengo console.log("callApi is working"); . Esa función asíncrona se llama en un evento de clic de botón. Pero al hacer clic en el botón no pasa nada. La función no se activa y no se imprime nada en la consola.

¿Qué estoy haciendo mal?

 <template> <div> <div class="mb-5"> <button class="btn btn-primary mt-5" @click="callApi"> Call API </button> </div> <div class="result-block-container"> <div :class="['result-block', executed ? 'show' : '']"> <h6 class="muted">Result</h6> {{ JSON.stringify(apiMessage, null, 2) }} </div> </div> </div> </template>

 import { defineComponent, inject } from "vue"; import { query as q, client } from "faunadb"; export default defineComponent({ name: "Api", setup() { console.log("Setup is working"); //<---- THIS PRINTS TO CONSOLE ON PAGE LOAD const callApi = async () => { console.log("callApi is working"); //<---- THIS DOES NOT PRINT TO CONSOLE ON BUTTON CLICK const apiMessage = null; const executed = false; const auth = inject("Auth"); const accessToken = await Auth.getTokenSilently(); try { const client = new Client({ secret: accessToken }); const { Paginate, Documents, Collection, Lambda, Get, Var } = q; const data = await client.query( q.Map( Paginate(Documents(Collection("stores"))), Lambda(["storeRef"], Get(Var("storeRef"))) ) ); console.log(data); apiMessage = data; executed = true; } catch (e) { console.log(e); apiMessage = `Error: the server responded with '${e.response.status}: ${e.response.statusText}'`; } }; }, });