Vue js用ajax加载模态内容

Question

I'm using vue js with laravel, In my page i have 13 modals, I thing it's not a good idea to insert 13 modals in the same page so i put this in my blade :

<modal v-if="showModal" @close="showModal = false">
     <header slot="header" v-html="modalHeader"></header>
     <component slot="body" :is="currentBody"></component>
</modal>

And in my file.js i have this :

Vue.component('modal', require('./components/Modal.vue'));
Vue.component('StatusModal', require('./components/modals/StatusModal.vue'));
Vue.component('UserModal', require('./components/modals/UserModal.vue'));

const profile = new Vue({
    el: '#profile',
    data: {
        showModal: false,
        modalHeader: '',
        currentBody: '',
    },
    methods: {
        showStatus(){
            this.showModal = true
            this.modalHeader = 'Confirmation'
            this.currentBody = 'StatusModal'

        },
        showUser(){
            this.showModal = true
            this.modalHeader = 'Confirmation'
            this.currentBody = 'UserModal'
        }
    }
})

Just for example here i have two modals 'StatusModal' and 'UserModal' and i load them in my js file, so if i have 13 or more modals i will load 13 components in my js file, i need a solution that load only component that i need when i call function, It's possible to load component in function call?

I tried to use ajax and load blade content in ajax call and load it in my modal but i face a problem, i'm using vue validation for inputs so validation don't work (vee-validate) also any vue variable does not compiled and i get {{ variable }} in my modal.

What is the best solution for my case? i appreciate any help