[Vuejs]-Unable to read JSON Data from BigQuery and display it on the Vue Web Page (Nuxt 3 & Google BigQuery)

So, solved the issue. I forgot to add return rows; which returns the query results. Here is the updated code if somebody might need it later

vue page

<template>
    <div>
        {{ data }}
        <div v-if="data === ''">Data is empty</div>
    </div>
    
</template>

<script>

export default {
    data: () => ({
        data: '',
    }),
    
    created() {
        this.viewPTTHistory()
    },

    methods: {
        async viewPTTHistory() {
            console.log('Fetching data from API endpoint...')
            const headers = { 'Content-Type': 'application/json' }
            const response = await fetch(
                '/api/viewptt',
                { headers }
            )
            const jsonData = await response.json();
            console.log('Received API response:', jsonData);
            this.data = jsonData;
            console.log('Data:', this.data);
        }
    }
}
</script>

in /api/viewptt.js/

import { BigQuery } from "@google-cloud/bigquery"

export default defineEventHandler(async (req, res) => {
    try {
        const projectId = 'sir-adley'
        const datasetId = 'pretask'
        const tableId = 'pretask'
        const bigquery = new BigQuery({
            projectId: projectId
        })
        const query = `SELECT * FROM ${projectId}.${datasetId}.${tableId}`
        const options = {
            query: query,
            location: 'asia-southeast1'
        }

        const [job] = await bigquery.createQueryJob(options);
        const [rows] = await job.getQueryResults();
        rows.forEach(row => console.log(row));
        return rows;
    } catch (error) {
        console.error(error);
    }
})

so now I can display the JSON data on my vue page.

sharing the screenshot for it

json data on vue page

silly mistakes haha