Заголовок из данных в Nuxt

На карточке пользователя заголовок вкладки логично совпадает с именем из API, а не с общей фразой User. Данные приходят асинхронно, поэтому заголовок нужно привязать к data так, чтобы он обновился, когда ref заполнится.

Функция useSeoMeta принимает для title функцию-геттер. Nuxt вызывает её при изменении зависимостей, и вкладка остаётся согласованной с ответом сервера. Для /users/1 во вкладке появится имя из JSON:

<script setup>
	const route = useRoute();
	
	const { data } = await useFetch(
		() =>
			'https://jsonplaceholder.typicode.com/users/' +
			route.params.id,
	);
	
	useSeoMeta({
		title: () => data.value?.name,
	});
</script>
<template>
	<p>
		{{ data?.name }}
	</p>
</template>

Сделайте страницу одного товара, у которой заголовок вкладки совпадает с названием товара из ответа API.

Проверьте два разных id товара: текст вкладки должен меняться вместе с названием на странице.