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