My VueJs project uses Axios to send server requests. Some of server-side requests needs authenticated user with JWT.

I would like to make a generic client-side service to make these authenticated requests and, if not authenticated, my user needs to be shown a modal login form.

So, I created a Mixin to do so:

import ModalLogin from '../../components/ModalLogin';
import Vue from 'vue'

export default {
    components: {
        ModalLogin
    },
    data: function () {
        return {
            ModalLoginComponent
        }
    },
    methods: { 
        authorizedGet(url) {
            if(!localStorage.getItem('user')) {
                this.instantiateModal()
                this.data().ModalLoginComponent.methods.show()
            }
        },
        instantiateModal() {
            var ModalLoginClass = Vue.extend(ModalLogin)
            this.ModalLoginComponent = new ModalLoginClass()
            this.ModalLoginComponent.$mount()
        }
    }
}

and a basic ModalLogin component. But, obviously, I don't know how to add my ModalLogin to my DOM from a mixin. I'd like my modal to be global for all my app.