vue.js Import and load component dynamically - vue.js

Question

I am trying to get the following code dynamically import a component from a folder. However, vue doesn't import anything or show an error. (It's as if it doesn't sense the computed field changing).
What am I doing wrong? (I have already gone through the forums and this seems rare)
<template>
<component v-bind:is="column"></component>
</template>
<script>
export default {
name: "Column",
computed: {
column() {
return () => import(`../columns/${this.$store.state.column}.vue`);
},
}
};
</script>

Answer 1

First you need to import/register all components, you can either do this on component level like below or globally.
export default {
components: {
ColumnA: () => import('../columns/ColumnA'),
ColumnB: () => import('../columns/ColumnB'),
ColumnC: () => import('../columns/ColumnC'),
ColumnD: () => import('../columns/ColumnD'),
}
}
Next you have to make sure you can map your state to column-a to match the component name. if that's the case you can just use:
computed: {
column() {
return this.$store.state.column;
}
}
If not you would have to create a map:
computed: {
column() {
const mappedComponents = {
myStateKeyForColumnA: 'column-a',
myStateKeyForColumnB: 'column-b',
myStateKeyForColumnC: 'column-c',
myStateKeyForColumnD: 'column-d',
}
return mappedComponents[this.$store.state.column];
}
}
Edit
To register the components globally one can use require.context.
in main.js
const context = require.context('./path/to/columns', true, /\.vue$/)
for (const key of context.keys()) {
// key gives us the file name, ie. ./ColumnA.vue
// the code below, to register the component name is based on the above patterh
// likely you will have to modify this
Vue.component(key.slice(2).split('.')[0], () => context(key))
}