I have a _ctx.product is undefined

I have a Nuxt3 application. And inside a file named ProductList.vue which contains a list of products which returns a name, description, image...
When I try to create a [productId].vue file I get an error _ctx.product is undefined I don't understand why. Thanks for your help


What I tried


ProductList.vue



Filtrer par catégorie




Voir tout

{{ category }}







*






{{ product.category }}





View details for {{ product.title }}






{{ product.title }}




{{ product.price }}










export default {
data() {
return {
selectedCategory: "", // Ajoutez cette propriété
products: [
{ id: 1, title: 'Candy Land', price: '120€ / jour - 180€ / 2 jours', description: 'loremipsum set', image: 'candy.jpg', category: 'Chateaux Gonflables' },
{ id: 2, title: 'Château Fort', price: '100€ / jour - 160€ / 2 jours', description: 'lorem ipsum set', image: 'chateau_fort.jpg', category: 'Chateaux Gonflables' },

],
...
},
...




[productId].vue



{{ product.title }}




{{ product.description }}



export default {
async asyncData({ params }) {
const productId = parseInt(params.productId);
const product = products.find((p) => p.id === productId);

return { product };
},
};