How to use the uikit.modal function in uikit

initModal: function () {
      var vm = this
      this.UImodal = UI.modal(this.$els.modal, this.options)
      this.UImodal.on('show.uk.modal', () => {
        vm.show = true
        vm.$emit('show')
        setTimeout(function () {
          // catch .uk-overflow-container
          vm.UImodal.resize()
        }, 1)
      })
      this.UImodal.on('hide.uk.modal', () => {
        vm.show = false
        vm.$emit('hide')
      })
    }
  }

mounted() {
            UIkit.modal(this.$refs.modal).show();
            UIkit.util.on(this.$refs.modal, 'hide', (e) => {
                if(e.target === this.$refs.modal) {
                    this.$emit('hide');
                }
            });
        },
        beforeDestroy() {

useEffect(() => {
    const showing = selfVal && enabled;
    var modal = null;
    if (selfVal) {
      modal = require('uikit').modal(selfVal);
      selfVal.addEventListener('hidden', closeListener);
    }
    if (modal && showing) {
      modal.show();
    }
    return () => {
      if (modal && showing) {
        modal.hide();
      }
    };
  }, [selfVal, enabled]);
  useEffect(() => {

[HIDE_MODAL]: (state, action) => {
      const modal = document.getElementById('uk-modal')
      if (modal) {
        const modalTag = modal.getAttribute('data-modal-tag')
        if (modalTag === action.payload) UIKit.modal(modal).hide()
        else if (!modalTag) UIKit.modal(modal).hide()
      }
      return state
    },

public static showModal() {
        UIkit.modal();
    }

componentDidMount () {
    this.setState(
      {
        modal: UIKit.modal(this.modal, this.props.options)
      },
      () => {
        this.state.modal.show()
        $(this.modal).on('hide.uk.modal', this.clearModal)
      }
    )
  }

beforeDestroy() {
            let modal = this.$refs.modal;
            UIkit.modal(modal).hide().finally(() => {
                modal.remove();
            });
        }
    }