Remove recipes from emit - vuejs3

Question

I have a Recipe project and I want to delete those recipes through a button. I have 3 components:
RecipesCar: Who prints the recipes
RecipesList: Who load de list
App: Who has the recipes object.
I'm trying to delete the recipes but at this moment is not working. I can capture the events but is not working cause the recipes are not deleting.
Here my code:
RecipesCard:
<template>
<div class="recipe" :class="recipe.featured && 'featured'">
<button class="delete-recipe">
<img
src="../assets/delete-button.svg"
alt="Delete recipe"
#click="deleteRecipe(this.recipe.id)"
/>
</button>
<h2 class="recipe-title">{{ recipe.title }}</h2>
<div class="recipe-image">
<img :src="recipe.imageUrl" />
</div>
<div class="recipe-info">
<div class="recipe-info-item">
<span class="recipe-info-label">Servings:</span>
<span class="recipe-info-value">{{ recipe.servings }}</span>
</div>
<div class="recipe-info-item">
<span class="recipe-info-label">Time:</span>
<span class="recipe-info-value">{{ recipe.time }}</span>
</div>
<div class="recipe-info-item">
<span class="recipe-info-label">Difficulty:</span>
<span class="recipe-info-value">{{ recipe.difficulty }}</span>
</div>
</div>
<div class="recipe-ingredients">
<h3 class="recipe-ingredients-title">Ingredients</h3>
<ul class="recipe-ingredients-list">
<li v-for="ingredient in recipe.ingredients" :key="ingredient">
{{ ingredient }}
</li>
</ul>
</div>
<div class="recipe-directions">
<h3 class="recipe-directions-title">Directions</h3>
<ol class="recipe-directions-list">
<li v-for="direction in recipe.directions" :key="direction">
{{ direction }}
</li>
</ol>
</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "RecipeCard",
props: {
recipe: {
type: Object,
required: true,
},
},
methods: {
deleteRecipe() {
console.log(this.recipe.id);
this.$emit("my-event-delete", this.recipe.id);
},
},
});
</script>
RecipesList:
<template>
<div id="recipe-list" class="recipe-list">
<div v-for="(recipe, id) in recipeList" :key="recipe.id">
<recipe :recipe="recipe" #my-event-delete="deleteRecipe(id)" />
</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
import Recipe from "./RecipeCard.vue";
export default defineComponent({
name: "RecipeList",
props: {
recipeList: {
type: Array,
required: true,
},
},
components: { Recipe },
methods: {
deleteRecipe(id) {
console.log("Componente borrado " + id);
},
},
});
</script>
App
<template>
<div id="app">
<div class="header">
<img class="logo" alt="UOC logo" src="./assets/uoc-logo.png" />
<div class="app-name">Recipe book</div>
</div>
<search-bar />
<recipe-list :recipeList="recipeList" #deleteRecipe="deleteRecipe" />
<recipe-form v-if="showModal" />
</div>
</template>
<script>
import RecipeList from "./components/RecipeList.vue";
import RecipeForm from "./components/RecipeForm.vue";
import SearchBar from "./components/SearchBar.vue";
import { defineComponent } from "vue";
export default defineComponent({
name: "App",
components: {
RecipeList: RecipeList,
RecipeForm,
SearchBar,
},
data: () => ({
recipeList: [
{
id: 1,
servings: 4,
time: "30m",
difficulty: "Easy",
title: "Spaghetti",
ingredients: ["noodles", "tomato sauce", "cheese"],
directions: ["boil noodles", "cook noodles", "eat noodles"],
imageUrl:
"https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=face&w=2000&h=1000&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F21%2F2018%2F02%2F14%2Frecetas-4115-spaghetti-boloesa-facil-2000.jpg",
},
{
id: 2,
servings: 2,
time: "15m",
difficulty: "Medium",
title: "Pizza",
ingredients: ["dough", "tomato sauce", "cheese"],
directions: ["boil dough", "cook dough", "eat pizza"],
imageUrl:
"https://www.saborusa.com/wp-content/uploads/2019/10/Animate-a-disfrutar-una-deliciosa-pizza-de-salchicha-Foto-destacada.png",
featured: true,
},
{
id: 3,
servings: 6,
time: "1h",
difficulty: "Hard",
title: "Salad",
ingredients: ["lettuce", "tomato", "cheese"],
directions: ["cut lettuce", "cut tomato", "cut cheese"],
imageUrl:
"https://www.unileverfoodsolutions.es/dam/global-ufs/mcos/SPAIN/calcmenu/recipes/ES-recipes/In-Development/american-bbq-beef-salad/main-header.jpg",
},
],
showModal: false,
}),
methods: {
deleteRecipe() {
console.log("this.id");
this.recipeList.splice(this.recipeList.indexOf(this.id), 1);
},
},
});
</script>
Can you help me plz? Thanks
I tried to make and 'emit' but the emit stops on RecipeList.