Vue如何销毁已创建并安装到#应用程序的工具提示组件

我正在尝试创建一个自定义Vue工具提示指令,该指令创建一个组件并将其渲染/装载到应用程序的根元素。

tooltip 组件打开 mouseenter 它应该这样做,但不会破坏它 mouseleave

稍后,我将获取该指令绑定到的元素ClientRect,并应用样式来定位工具提示。

这是我的指令代码:

import Vue from 'Vue';
import tooltip from '../../views/components/tooltip/tooltip.vue';

export default {
    bind() {},
    inserted(el) {
        let component;
        el.addEventListener('mouseenter', () => {
            const Tooltip = Vue.extend(tooltip);
            component = new Tooltip().$mount();
            document.getElementById('app').appendChild(component.$el);
        });
        el.addEventListener('mouseleave', () => {
            component.$destroy();
        });
    },
    update() {},
    componentUpdated() {},
    unbind() {},
};

如何正确销毁上的组件 ?