Why is a Vue instance created outside of the main app not seeing Vuetify components?

Question

Vue.js

Hello everybody!
I can't figure out why [Vue warn]: Unknown custom element: <v-dialog> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Trying to make a plugin using vuetify, plugin code

import Vue from 'vue';
import vuetify from "vuetify";

const dialog = {
    name:'askdialog',
    vuetify,
    data:{
        askDialog:false,
        dialogTitle:'',
        dialogMessage: '',
        dialogType:'alert'
    },
    computed:{
        buttons(){
            switch (this.dialogType) {
                case 'confirm':
                    return [
                        {title:'OK', icon:'done', command: 'ok'},
                        {title:'Отмена', icon:'close', command: 'cancel'},
                    ]
                case 'ask':
                    return [
                        {title:'Да', icon:'done', command: 'ok'},
                        {title:'Нет', icon:'close', command: 'cancel'},
                    ]
                default:
                    return [
                        {title:'OK', icon:'done', command: 'ok'},
                    ]
            }
        }

    },
    template:'        <v-dialog width="500px" v-model="askDialog">\n' +
        '            <v-card>\n' +
        '                <v-card-title class="primary" dense primary-title>\n' +
        '                    {{dialogTitle}}\n' +
        '                </v-card-title>\n' +
        '                {{dialogMessage}}\n' +
        '                <v-toolbar dense>\n' +
        '                    <v-spacer></v-spacer>\n' +
        '                    <v-btn v-for="btn in buttons" @click="$emit(btn.command)">\n' +
        '                        <v-icon>{{btn.icon}}</v-icon>\n' +
        '                        {{btn.title}}\n' +
        '                    </v-btn>\n' +
        '                </v-toolbar>\n' +
        '            </v-card>\n' +
        '        </v-dialog>\n'
}

export default {
    install(Vue, el){
        this.el = el
        this.instance = null
        Vue.prototype.$dialog=this
    },
    _checkInstance(){
        if(this.instance===null){
            this.instance = new Vue(dialog)
            this.instance.$mount('#'+this.el)
        }
    },
    alert(title, message, callback){
        this._checkInstance()
        this.instance.$data.dialogTitle = title
        this.instance.$data.dialogMessage = message
        this.instance.$data.dialogType = 'alert'
        this.instance.$data.askDialog = true
    }
}

in main.js

import askdialog from "./plugins/askdialog";

    Vue.use(askdialog,'ask') // ask - id элемента div, куда будет монтироваться

The essence of the plugin:
adds $dialog to Vue.prototype, which will have alert, confirm and ask methods.
The essence of the methods is to display a modal window with a set of buttons predefined for each method.
The reason for using vuetify is that it is already used in the project and I liked its modal windows - actually modal, you don't look like a tab on the elements under the window
Usage - this.$dialog.alert('Title','message text',callback). Things have not yet come to the implementation of the callback.
For correct use, the root template has a div with an id, this id is passed to the plugin and, as planned, the Vue instance that creates the plugin should be mounted into it.

Everything seems to be fine, except for one thing - as soon as $mount is executed, error messages about unrecognized custom elements immediately pour into the console. It seems that vuetify is also used in the project and I connect it to the plugin - errors still occur.

Why is this happening?

Answer 1

For starters check vuetify version, version 1.5 and 2 are different things.