vue插件封装，多次调用问题

Question

封装的插件有如下代码：
toast/toast.vue

<template>
    <div id="toast">
        <p v-show="show">{{msg}}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: '',
            show: false
        }
    }
}
</script>

toast/index.js

import ToastComponent from './toast.vue'

const Toast = {}

// 注册Toast
Toast.install = (Vue) => {
    const ToastConstructor = Vue.extend(ToastComponent)
    const instance = new ToastConstructor()

    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)

    Vue.prototype.$toast = (msg) => {
        instance.msg = msg
        instance.show = true
    }
}

export default Toast

main.js

import Toast from './common/plugin/toast'
Vue.use(Toast)

使用

this.$toast.show("你好aaa")

效果

现在的问题是，单次调用时没什么问题的，但是如果我想在同一个页面分别调用

this.$toast.show("你好aaa")和this.$toast.show("你好bbb")，

我期望的效果是出现你好aaa和你好bbb两个插件产生的元素，但实际结果是界面只会显示你好bbb，第二次的调用会覆盖掉第一次的调用，请问如何达到调用两次就产生两个插件，而不是只显示最后的一次调用。

Answer 1

Toast.install = (Vue) => {
    const ToastConstructor = Vue.extend(ToastComponent)
   
    Vue.prototype.$toast = (msg) => {
        const instance = new ToastConstructor()

        instance.$mount(document.createElement('div'))
        document.body.appendChild(instance.$el)

        instance.msg = msg
        instance.show = true
    }
}