Promise executeRecaptcha does not wait for challenge, token is always null

[StijnCoolen]

When I call await executeRecaptcha() I can see the recaptcha challenge pop up. I would expect the promise only to resolve after a user solves this challenge. But it does resolve as soon as the challenge shows, thus token is always null.

I use a Nuxt plugin:

import { useReCaptcha, VueReCaptcha } from 'vue-recaptcha-v3';

export default defineNuxtPlugin((nuxtApp) => {
    const config = useRuntimeConfig();

    nuxtApp.vueApp.use(VueReCaptcha, {
        siteKey: config.public.recaptcha.siteKey,
        loaderOptions: {
            autoHideBadge: true
        }
    });

    const recaptchaInstance = useReCaptcha();

    return {
        provide: {
            captcha: recaptchaInstance
        }
    };
});

And a composable:

export const useRecaptchaToken = async (action: string): Promise<string | undefined> => {
    if (!action) {
        console.log('Recaptcha action is required');
        return;
    }

    const { $captcha } = useNuxtApp();

    if (!$captcha) {
        console.log('ReCaptcha is not initialized');
        return;
    }

    const { recaptchaLoaded, executeRecaptcha } = $captcha;

    await recaptchaLoaded();

    return await executeRecaptcha(action);
};

In my components:

onMounted(async () => {
    const token = await useRecaptchaToken('create-account');

    console.log('the token is...', token);
});