So the user makes a request for some data but its prompted with a captcha challenge beforehand... when the challenge is resolved, the captcha component emits an event with a token that needs to go in the request.

My question is: can I use a promise to wait for the challenge to be resolved and then make the request with the token? Can I listen to a child component event like this and then resolve the promise?

If this is not the correct way to handle such situation could anyone point me in the right direction? Thanks!

I can listen to the child component event with a v-on:verified but I want to trigger the challenge when making the request and then continue with it after the captcha is resolved by the user.

//component.ts
import captchaComponent from '...';


function executeCaptchaChallenge(){

    // executes challenge on child component via boolean prop
    this.runChallenge = true;

    return new Promise(resolve => {

    //listen to child component event then resolve promise with token emitted (example)
    child.$on('verified', token => {resolve(token)}
})
}


function async getData(){

    const token = await this.executeCaptchaChallenge();
    const response = await axios.post(URL, token);
}

///component.vue

<template>
    <div>
        <button @click="getData">GET DATA</button>
        <captchaComponent @verified="(token) => console.log(token)" />
    </div>
</template>

<script src="component.ts"></script>