Mint-ui pop-up window problem

main.js

import Vue from "vue"
import App from "./App"
import router from "./router"
import Mint from "mint-ui"
import "mint-ui/lib/style.css"
Vue.use(Mint)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: "-sharpapp",
  router,
  components: { App },
  template: "<App/>"
})
<template>
  <div class="hello" >
    {{msg}}
    <my-component></my-component>
    <Header></Header>
    <mt-button @click="handleButtonClick">Click Me</mt-button>
  </div>
</template>
<script>
import Header from "./header.vue"
var Child = {
  template: "<div>Asssz custom component!</div>"
}
export default {
  name: "HelloWorld",
  data () {
    return {
      msg: "Welcome to Your Vue.js App"
    }
  },
  components: {
    //  <my-component>
    "my-component": Child,
    Header
  },
  methods: {
    handleButtonClick: function () {
      MessageBox("1", "1")
    }
  }
</script>

compile error

 http://eslint.org/docs/rules/no-undef  "MessageBox" is n
ot defined
  src\components\HelloWorld.vue:28:7
        MessageBox("1", "1")

if you click on the button, the prompt box will not pop up. Why

Feb.28,2021

import {MessageBox} from 'mint-ui';


call this.$messagebox

Menu