vue.extend无法显示template内容

Question

使用Vue.extend(require('./message.vue'));导入一个消息组件放到body里面，不知道什么原因，一直导入的只有el的空div，message.vue里面的template没有导入进来，求教是什么问题？

src/components/toast/index.js

import Vue from 'vue';

let MyMsgConstructor = Vue.extend(require('./message.vue'));

let instance;

let message = function (msg) {
    instance = new MyMsgConstructor({
        el: document.createElement("div"),
        data: {
            message: msg,
            visible: true
        }
    });
    
    document.body.appendChild(instance.$el);
    return instance;
};


export default message;

src/components/toast/message.vue

 <template>
    <transition name="el-message-fade">
        <div v-show="visible" class="my-msg">{{message}}</div>
    </transition>
</template>

<script>
    export default {
        data() {
            return {
                message: '',
                visible: true
            }
        },
        methods: {
            close() {
                setTimeout(() => {
                    this.visible = false;
                }, 2000)
            },
        },
        mounted() {
            this.close();
        }
    }
</script>

main.js

import message from './components/toast/index.js'
Vue.$message = Vue.prototype.$message = message;

使用

openToast() {
    this.$message("test");
}

Answer 1

  //组件需要挂载在dom元素上
  instance.vm = instance.$mount()

Answer 2

import toast from '@/components/common/toast/toast.vue';

const ToastConstructor = Vue.extend(toast);

用这样就可以解决，先import

至于为什么， Vue.extend(require('./message.vue')); 这样不行，暂时没找到问题所在