title: Vue.js event emitted by child component does not reach parent
body: <p>in my vue.js application i have a component which children inside, which are either of component type "Test" or "AnotherComponent".
  The user can add one of those components by a button click and it will then be added at the end of the list of child components.</p>
  
  <p>Each of these components should have a delete-button to remove the component from the list shown.</p>
  
  <p>I added such a button to "AnotherComponent" and added an event emitter on click because I wanted to notify the parent component of the event so it will take care of removing the right component from the list. Is this approach correct at all?</p>
  
  <p><strong>This is the child component</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class="container"&gt;
          &lt;b-card
              title="Card Title"
              class="mb-2"
          &gt;
              &lt;b-card-text&gt;
                  This card has some text and it different from the other component.
                  Also there is a nice picture.
              &lt;/b-card-text&gt;
              &lt;button
                  type="button"
                  class="btn btn-secondary"
                  v-on:click="deleteComponent()"
              &gt;
                x
              &lt;/button&gt;
          &lt;/b-card&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    name: 'AnotherComponent',
    data() {
      return {
      };
    },
    methods: {
      deleteComponent(event) {
        this.$emit('delete-component', this.$vnode.key);
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>This is the parent component:</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class="container"&gt;
        &lt;h1&gt; This is my first layout page &lt;/h1&gt;
        &lt;alert :message=alertText&gt;&lt;/alert&gt;
        &lt;button
          type="button"
          class="btn btn-primary"
          v-on:click="addComponent('test')"
        &gt;
          add component 1
        &lt;/button&gt;
        &lt;button
          type="button"
          class="btn btn-primary"
          v-on:click="addComponent('another')"
        &gt;
          add component 2
        &lt;/button&gt;
        &lt;div class="row"&gt;
          &lt;template
            v-for="block in content.body"&gt;
              &lt;div class="col-3" v-bind:key="`col-${block._uid}`"&gt;
                &lt;component
                  :is="block.component"
                  :block="block"
                  :key="block._uid"
                  v-on:delete-component="onDeleteChildComponent($event)"&gt;
                &lt;/component&gt;
              &lt;/div&gt;
          &lt;/template&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  /* eslint-disable vue/no-unused-components */
  import axios from 'axios';
  
  import TestComponent from './TestComponent.vue';
  import AnotherComponent from './AnotherComponent.vue';
  import Alert from './Alert.vue';
  
  export default {
    name: 'FirstPage',
    data() {
      return {
        alertText: 'this is a test!',
        content: {
          body: [], /* holds the array of objects that are components */
        },
      };
    },
    components: {
      alert: Alert,
      test: TestComponent,
      another: AnotherComponent,
      // AnotherComponent,
    },
    methods: {
      getComponents() {
        const path = 'http://localhost:8080/components';
        axios.get(path)
          .then((res) =&gt; {
            console.log('res.data');
            this.content.body = res.data.components;
          })
          .catch((error) =&gt; {
            // eslint-disable-next-line
            console.error(error);
          });
      },
      addComponent(componentType) {
        const path = 'http://localhost:8080/components';
        const payload = {
          component: componentType,
          headline: 'Bar',
        };
        axios.post(path, payload)
          .then(() =&gt; {
            this.getComponents();
            this.message = 'Component added!';
          })
          .catch((error) =&gt; {
            // eslint-disable-next-line
            console.log(error);
            this.getComponents();
          });
      },
    },
    onDeleteChildComponent(id) {
      console.log('delete child');
      console.log(id);
    },
    created() {
      console.log('fetching components from backend');
      this.getComponents();
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Unfortunately <strong>in the parent component this event from th child does not get triggered</strong> at all.
  I am just starting with vue.js, so what am I doing wrong here? Thanks in advance! </p>