How to get the successful response after scanning login QR code from baileys API

Question

So I'm integrating Baileys Rest API from here Baileys-Rest to a Laravel Inertia, it works perfectly but, the issue is, how do I keep watch the response of the sessions status if the user is scan the QR and when it successfully logined it changes the image of the QR to a checklist image

I've tried to run the check in watch its not working, I also tried to remove the boolean check in watch not working too. The check is not running whenever the QR code is active to be scanned

Device.vue

<template>
    <AuthenticatedLayout>
        <div class="m-5 p-5">
            <div class="m-5">
                <img v-if="qrCode" :src="qrCode" alt="QR Code" />
            </div>
            <button class="btn btn-success" @click="scan(id)">Button</button>
            <button class="btn btn-error" @click="logout()">logout</button>
        </div>
    </AuthenticatedLayout>
</template>

<script>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { ref, onMounted, onUpdated } from "vue";
import QRCode from "qrcode";
import axios from "axios";
export default {
    components: {
        AuthenticatedLayout,
    },
    setup() {
        const qrCode = ref(null);
        let statusResponse = ref("");
        const id = "TheId";
        const deviceName = "TheId";
        const status = ref("");
        const reloadPage = ref("");
        let intervalId = null;

        return {
            qrCode,
            statusResponse,
            id,
            deviceName,
            status,
            reloadPage,
            intervalId,
        };
    },
    watch: {
        id: {
            immediate: true,
            handler(newId) {
                const scan = this.scan(newId);
                if (scan) {
                    this.check(newId);
                }
            },
        },
    },
    beforeUnmount() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
        }
    },
    methods: {
        async check(id) {
            setInterval(async () => {
                await axios.get(
                    `http://localhost:3000/sessions/${this.deviceName}`
                );
            }, 2000);
        },
        async scan(id) {
            // console.log("here");
            try {
                //check if session is exists
                const statusResponse = await axios.get(
                    `http://localhost:3000/sessions/${this.deviceName}/status`
                );
                console.log(statusResponse.data.status);
            } catch (error) {
                // this.intervalId = true;
                console.log(error.response.data.error == "Session not found");
                if (error.response.data.error == "Session not found") {
                    // console.log("here");
                    try {
                        try {
                            const res = await axios.post(
                                `http://localhost:3000/sessions/add`,
                                { sessionId: this.deviceName }
                            );
                            this.qrCode = res.data.qr;
                            //If QR code Valid or scanned and login
                            return true;
                        } catch (error) {
                            console.error("Error:", error);
                        }
                    } catch (error) {
                        console.log("Error : ", error);
                    }
                }
            }
        },

        async logout() {
            const response = await fetch(
                `http://localhost:3000/sessions/${this.deviceName}`,
                {
                    method: "DELETE",
                    headers: {
                        "Content-Type": "application/json",
                    },
                }
            );
            location.reload();
        },
    },
};
</script>

<style lang="scss" scoped></style>

Answer 1

Based on Yash Maheshwari comments, I can achieve the result I wanted by changing the handler to async function

watch: {
        id: {
            immediate: true,
            async handler(newId) {
                const scan = await this.scan(newId);
               
            },
        },
    },