Remove recipes from emit

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.