[Python] How to get values from FormControl components of frappe ui using in vuejs?

when i try to use frappe ui components in vujs project i got some errors. i have a Dialog component containing TextEditor,FormControl components of type text,date,select

<Dialog v-model="showTicketDialog"
ptions="{

actions: [
{
label: 'Save',
variant: 'solid',
onClick: async () => {
const payload = {
title: titleValue.value,
category: categoryValue.value,
purchase_date: dateValue.value,
description: descriptionValue.value,
// description: newTicket.value.description
};
console.log('payload',payload)


try {
await ticketList.insert.submit(payload);
console.log('Ticket saved successfully');
ticketList.reload(); // Refresh the list view
showTicketDialog.value = false; // Close the dialog
clearForm(); // Reset the form
} catch (error) {
console.error('Error saving ticket:', error);
}
}
// onClick:
// ()=>{
// console.log('Save clicked ')
// }
}
]
}">
<template #body-title>
Create New Ticket
</template>
<template #body-content>
<div class="p-2">
<FormControl
:type="'text'"
:ref_for="true"
size="sm"
variant="subtle"
placeholder="title"
:disabled="false"
label="Title"
v-model="titleValue"
/>
</div>


<div class="p-2">
<FormControl
type="select"
ptions="categoryOptions"
:ref_for="true"

size="sm"
variant="subtle"

:disabled="false"
label="Category"
v-model="categoryValue"
/>
</div>
<div class="p-2 mt-5">
<FormControl
:type="'date'"
:ref_for="true"
size="sm"
variant="subtle"
placeholder="Placeholder"
:disabled="false"
label="Purchase Date"
v-model="dateValue"
/>
</div>

<div class="p-2 mt-5">
<p class="text-gray-600 text-sm pb-2">Description</p>
<TextEditor
ref="editor"
:fixedMenu="true"
v-model="descriptionValue"
editor-class="prose-sm min-h-[4rem] border rounded-b-lg border-t-0 p-2"
placeholder="Describe your problem..."
@change="handleDescriptionChange"

/>
</div>


</template>
</Dialog>


when i click on the save in Dialog i got the following in console

Content.vue:25 payload {title: undefined, category: undefined, purchase_date: undefined, description: undefined}

Continue reading...