Retrieving data from supabase Postgresql in the form using vue 3 - postgresql

Question

I am trying to fetch the stored data from Profiles table in the postgresql database in supabase, however I seem to fail during the process as the form appear to be blank without any data in the form although the getData() method was called onMounted.Any help would be appreciated. Below are the codes i am using to fetch data from supabase:
<q-dialog v-model="inception">
<q-card class="my-profi">
<q-form>
<q-card-section>
<div class="text-h6">Profile</div>
</q-card-section>
<q-card-section class="q-pt-none">
<div v-if="data">
<q-input :v-model="name" disable>
<template v-slot:prepend>
<q-icon name="person"/>
{{ data.name }}
</template>
</q-input>
<q-input :v-model="reg" disable>
<template v-slot:prepend>
<q-icon name="laptop"/>
{{ data.reg }}
</template>
</q-input>
<q-input :v-model="course" disable>
<template v-slot:prepend>
<q-icon name="book"/>
{{ data.course }}
</template>
</q-input>
<q-input :v-model="phone" disable>
<template v-slot:prepend>
<q-icon name="call"/>
{{ data.phone }}
</template>
</q-input>
</div>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Edit Profile" #click="profile = true" />
<q-btn color="red" flat label="Close" v-close-popup />
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</q-card-section>
</q-card>
</q-page>
</q-page-container>
</q-layout>
</div>
</template>
<script>
import { ref,computed,onMounted,toRefs,defineProps } from 'vue'
import lb from '../assets/download.jpeg'
import bg from '../assets/logo.svg'
import { useRouter } from 'vue-router'
import store from '#/store/index'
import supabase from '#/supabase'
export default {
setup () {
const user = computed(()=> store.state.user)
const props = defineProps(['session'])
const {session} = toRefs(props)
const name = ref('')
const reg = ref('')
const phone = ref('')
const course = ref('')
const picture = ref('')
const statusMsg = ref(null)
const router = useRouter()
// const route = useRouter()
// const currentId = route.params.dashId
onMounted(()=>{
getData()
})
const getData = async() =>{
try{
const {user} = session.value
const{ data, error} = await supabase.from("profiles").select('name','reg','phone','course').eq('id', user.id).single()
if (error) throw error
if(data){
name.value = data.name
reg.value = data.reg
phone.value = data.phone
course.value = data.course
}
}catch(error){
error.value = error.message
setTimeout(() => {
error.value = false
}, 5000);
}
}
const addTodo= async()=>{
try{
const {error}= await supabase.from("Profiles").insert([
{
name:name.value,
reg:reg.value,
phone:phone.value,
course:course.value,}
])
if(error) throw error
statusMsg.value = "Saved successfully"
name.value = null,
reg.value =null,
phone.value= null,
course.value = null,
setTimeout(() => {
statusMsg.value = false
}, 5000);
}
catch (error){
error.value = `Error ${error.message}`
setTimeout(() => {
error.message = false
}, 5000);
}
}
const handleClick= async()=>{
await supabase.auth.signOut()
router.push('/')
}
return {
drawer: ref(false),
miniState: ref(true),
bg:bg,
lb:lb,
name,
reg,
phone,
course,
picture,
inception: ref(false),
secondDialog: ref(false),
profile: ref(false),
handleClick,
user,
addTodo,
}
}
}