转义键在 vuejs 中不适用于第二个模态窗口

我有一个包含多行的表格，每行都有一个按钮，单击该按钮时，会打开一个包含表单元素的模式窗口。

提交表单后，第二个窗口打开以供确认，第一个窗口关闭。

下面的代码是我的示例工作流程。

我的问题是

按 Escape 键，在打开第一个窗口时有效，但在打开第二个窗口时无法关闭。

<template>
    <div>
        <table>
            <tr>
                <td>
                    <button @click="openFormWindow">Open form</button>
                </td>
            </tr>
        </table>
        <modal v-on-escape="hideFirstModal" v-if="isFirstWindowOpen">
            <div>
                <form @submit="submitFormOne">
                    <input type="text">
                    <button type="submit"></button>
                </form>
            </div>
        </modal>
        <modal v-on-escape="hideSecondModal" v-if="isSecondWindowOpen">
            <p>confirmation window</p>
        </modal>
    </div>
</template>

<script>
export default {
    data () {
        return {
            isFirstWindowOpen: false,
            isSecondWindowOpen: false
        }
    }
    methods: {
        openFormWindow () {
            // form window opens 
            this.isFirstWindowOpen = true
        },
        hideFirstModal () {
            this.isFirstWindowOpen = false
        },
        hideSecondModal () {
            this.isSecondWindowOpen = false
        },
        submitFormOne () {
            // submit the details, let the first window close & open the second window.
            this.isFirstWindowOpen = false
            this.isSecondWindowOpen = true
        }
    }
}
</script>

vue 指令 on-escape

Vue.directive('on-escape', {
    bind (el, binding, vnode) {
        el.customEventKeydown = function (event) {
            // Check if click was outside the el and his childrens
            if (event.keyCode === 27) {
                vnode.context[binding.expression](event)
            }
        }
        document.body.addEventListener("keydown", el.customEventKeydown)
    },
    unbind (el) {
        document.body.removeEventListener("keydown", el.customEventKeydown)
    }
})