Vue: событие, отправленное не получено

Question

Я могу разжечь огонь emitgetcartitems, но по какой-то причине другой слушатель, emitaddnotes, не стреляет handleAddNotes(). Я также проверил в контексте компонента, проверив this.$listeners и увидел только 1005 * для него. Я не уверен, почему другое событие не работает вообще.

шаблон лезвия

<div id = "app"> 

    <Modal
      :modal-type="modalType"
      :selected-product="selectedProduct"
      :variant-data="variantData" 
      @emitgetcartitems="handleGetCartItems"
      @emitaddnotes="handleAddNotes"

    >
    </Modal>
    <Cart>
    </Cart>
</div>

app.js

window.Vue = require('vue');
window.axios = require('axios');

Vue.component('Modal', 
  require('./components/Modal.vue').default);


new Vue({
  el: "#app",
  data() {
    return {
      modalType: null,
      orderNotes: null,
      couponCode: null,
      selectedProduct: {},
      variantData: [],
      cart: {}
    }
  },
  methods: {
    handleChangeTab: function(tab) {
       this.activeTab = tab
    },
    handleHideFlashMsg: function() {
      this.flashStatus = false
    },
    handleAddNotes: function(){
      console.log("!!!!!!!")
    },
    handleGetCartItems: function() {
        axios
            .get('/api/a-cart')
            .then(response => {
                this.cart = response.cart;
            });
    },

  }
)}

Modal.vue

<template>
  <div>
    <button v-on:click="addNotes()"></button>
  </div>
</template>
<script>
  export default {
    data() {
          return {
          couponInput: '',
          }
    },
        props: {
          selectedProduct: {type: Object},
          orderNotes: {type: String},
          couponCode: {type: String}
        },
        methods: {
            getCartItems: function() {
                        console.log("GET CART")
                this.$emit('emitgetcartitems')
            },
            addNotes: function() {
                     console.log("ADD NOTES")
              this.$emit('emitaddnotes')
            },  
      }
  }

</script>