How load dynamic component in class-based vue component

Question

I have two components which are trying to load dynamicly using object map.

1. Info (options-based)
2. SearchBar (class-based)

It works for options-based, but when i trying to load similar class-based component, i getting _currentTab is undefined . I tryed to use new SearchBar , but this too not working.

Vuex Module.

export default class Sidebar extends VuexModule {
    private _currentTab: object = tabs.SearchBar;
}

Tabs map

import SearchBar from "@/components/Tabs/SearchBar.vue";
import Info      from "@/components/Tabs/Info.vue";

export default {
    SearchBar : SearchBar,
    Info      : Info,
}

Sidebar Component

<div class="tab">
    <component v-bind:is="currentTab"></component>
</div>

import {Component, Vue} from 'vue-property-decorator';
import {mapGetters}     from 'vuex';

@Component({
    computed: {
        ...mapGetters({
            currentTab    : 'currentTab',
        }),
    },
})
export default class Sidebar extends Vue {

}

Info Component (options-based)

export default {
    data() {
        return {}
    },
}

SearchBar Component (class-based)

import {Component, Vue} from 'vue-property-decorator';
import {mapActions}     from 'vuex';

@Component
export default class SearchBar extends Vue {

}

Answer 1

For dynamic import I use:

  components: {
    History: () => import("./History"),
    MenuCardRight: () => import("@/components/MenuCardRight")
  },