How do I get the updated data and display correctly?

Curriculumvit.vue
<Cards
  v-for="(template, index) in templates"
  :key="index"
  :name="template.name"
  @delete="handleDeleteTemplate(template.id)"
  @edit="handleEditTemplate(template.id)"
  @preview="handlePreviewTemplate(template.id)"
  @statistics="handleStatisticsTemplate(template.id)"
/>

const handleUserTemplates = async () => {
    templates.value = await getUserTemplate();
};
-----------------------------------
// composable template.ts
const getUserTemplate = async (): Promise<any> => {
    try {
        const { data } = await useAsyncData(() =>
            requestFetch("/api/template/user", { method: "GET" })
        );
        return data.value?.body?.templates;
    } catch (err) {
        console.log(err);
    }
};

// this is the function that calls createTemplate
const handleCreateTemplateUser = async () => {
    const { user } = useAuth();
    await createUserTemplate({
        name: name.value,
        email: user.value?.email,
    });
    closeModal();
    await refreshNuxtData();
};