How to destroy sweet modal?

Question

Vue.js

There is a modal window library https://sweet-modal-vue.adepto.as/
Works well. But there's a problem.
If you click on the cross or outside the modal window, the modal is not destroyed, but hidden. Content in modals starts to glitch on objects in a cycle - the switches stop being pressed when opened multiple times. The cross of this modal (close button) is inside the library and is not controlled by me. Those. I can't assign an action launch to it that would destroy the modal. And the click outside the modal window, which closes it, is also inside the library, of course.
This component has a ref="modal"
in the component itself, data has the boolean properties
is_open and visible
, they are associated with these close buttons and with clicking outside the window. They hide the modal.
is it possible to somehow track by ref that these properties have changed and call my method, which will destroy the modal on an event inside this component? Or in another way.
I know vue and js at a superficial level, which is enough for most of my tasks. If something is complicated, then without an example, I won’t take it out on one explanation. Thank you kind people in advance.

<template>
  <div>
    <sweet-modal ref="modal">
      <slot v-if="is_open_modal" name="form"></slot>
    </sweet-modal>

    <slot name="info"></slot>

    <element @click.prevent="openModal">
      <slot name="open-button"></slot>
    </element>
  </div>
</template>

<script>
import { SweetModal, SweetModalTab } from "sweet-modal-vue";

export default {
  components: {
    SweetModal,
    SweetModalTab,
  },

  data() {
    return {
      is_open_modal: false,
    };
  },

  props: {
    data: Object,
  },

  methods: {
    openModal() {
      this.is_open_modal = true;
      this.$refs.modal.open();
      
    },

    closeModal() {
      this.is_open_modal = false;
      this.$refs.modal.close();
    },
  },
};
</script>

Answer 1

The close emitter was found in the component
@close="closeModal()"