Native HTML dialog ported to simple vue2 component

NativeDialog.vue

<template>
  <dialog ref="dialogRef" class="center-dialog">
    <div v-if="open" v-on-clickaway="closeMe">
      <slot></slot>
    </div>
  </dialog>
</template>

<script>
import { directive as onClickaway } from 'vue-clickaway'

export default {
  directives: {
    onClickaway: onClickaway,
  },
  props: {
    classes: {
      type: String,
      default: '',
    },
    open: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    open(newV) {
      if (newV) this.$refs.dialogRef.showModal()
      else this.$refs.dialogRef.close()
    },
  },
  created() {
    window.addEventListener('keydown', this.checkEscape)
  },
  destroyed() {
    window.removeEventListener('keydown', this.checkEscape)
  },
  methods: {
    closeMe() {
      this.$emit('closed')
    },
    checkEscape(event) {
      if (event.key === 'Escape') {
        this.closeMe()
      }
    },
  },
}
</script>
<style scoped>
@keyframes slide-up {
  0% {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

.center-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
  border: 0;
  border-radius: 5px;
  padding: 0px;
  animation: slide-up 0.2s ease-out;
}
.center-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
</style>