[Vuejs]-Problem with Javascript dynamic module import containing variables

As Bergur mentioned in his comment, the problem is indeed that webpack cannot resolve a string that doesn’t yet exist (issue explained here). What I did instead is add a property to my component that I called “content-list” and in the main page, I fill it with my desired components like so:

parent component:

<template>

    .....

    <modal-window   
                    :init-visible="modalVisible"
                    :content-list="contentList"
                    @modalClosed="modalClosed">
    </modal-window>

    .....

</template>

<script>
    import mainContent from './modals/main.vue';  //I doubt this is still useful
    import otherContent from './modals/other.vue'; //I doubt this is still useful


    export default{
        data(){
            return {

                modalVisible: false,

                contentList: {
                    main:       () => System.import("./modals/main.vue"),
                    other:      () => System.import("./modals/other.vue")
                },
            }
        },
    }

</script>

Inside the modal component:

<template>

    ...


    <div ref="scrolling-pane" class="scrolling-pane" :class="{ 'scrolling-pane-normal': !isDirty, 'scrolling-pane-dirty': isDirty }" key="b">
        <transition name="content-slide"
                    :enter-active-class="enterClassName"
                    :leave-active-class="leaveClassName"
                    @before-enter="beforeEnter" 
                    @before-leave="beforeLeave"
                    @after-enter="afterEnter"
                    @after-leave="afterLeave">

            <keep-alive>
                <component :is="currentModal" @switchContent="onSwitchContent"></component>
            </keep-alive>
        </transition>
    </div>

    ...

</template>

<script>

export default{
        components: {
        },

        props: {
            initVisible: Boolean,
            contentList: Object
        },
        data(){
            return {
                currentContent: this.contentList['main']
            }
        }

        ...

</script>