子から親のメソッドを発火できない[解決しました]

Vue.js 2での質問になります。

子から親のメソッドを実行できなくて悩んでいます。
parent.vueのボタンを押すと、child.vue(モーダルウィンドウ)が開き、そこにあるボタンを押すと、モーダルが閉じられて
displayAlertが実行されて、アラートが表示される

というような内容なのですが、モーダルウィンドウを開く・閉じるは実行されるのですが、アラートを表示させるメソッドだけ発火しません。

アドバイス等をいただけると幸いです。

parent.vue

<template>
    <button type="button" @click="openModal">モーダル</button>
    <modal v-show="showModal" @close="closeModal" @alt="displayAlert" />
 </template>

<script>
export default {
  components: {
    Modal,
  },
  data() {
    return {
      showModal: false,
    };
  },
  methods: {
    openModal() {
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
    },
    displayAlert() {
      alert("emit displayAlert");
    },
  },
};
</script>

child.vue

<template>
  <button
    type="button"
    class="btn btn-success"
    @click="sendAlert"
  >
    選択
  </button>
</template>
<script>
export default {
  name: "Modal",
  methods: {
    sendAlert() {
      console.log("sendAlert-start");
      this.$emit("close");
      this.$emit("displayAlert");
      console.log("sendAlert-end");
    },
  },
};
</script>

Chromeのコンソールログには

sendAlert-start
sendAlert-end

と表示されるのは確認しているので、子のメソッドが実行されているのは分かっています。

自己解決しました。

parent.vueを

<template>
  <button type="button" @click="openModal">モーダル</button>
  <modal v-show="showModal" @close="dispayAlert" />
 </template>
~~~~略
 closeModal() {
   this.showModal = false;
 },
 displayAlert() {
 this.showModal = false;
   alert("emit displayAlert");
 }

とやって、表示されるようになりました。