Interesting error using a variable with required function inside a method in Vue.js [duplicate]

I had a method inside a component:

    methods: {
        generateImageHtmlArray(imagePaths) {
            const basePath = '@/assets/';
            return imagePaths.map(path => {
                return `<div class="video" style="background-image: url('${require(basePath+ path)}')"></div>`;
            });
        },
    },

I was trying to get the short paths for images and than generate some HTML from it. To get the image I used require(basePath + path) where the basePath was just @/assets/ declared as a const variable. The error I got was:

Uncaught runtime errors:
ERROR
Cannot find module '@/assets/example.jpg'
webpackEmptyContext@http://localhost:8080/js/app.js:2113:10
generateImageHtmlArray/<@webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/AppHome.vue?vue&type=script&lang=js:7:122
generateImageHtmlArray@webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/AppHome.vue?vue&type=script&lang=js:6:25
data@webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/AppHome.vue?vue&type=script&lang=js:24:26
applyOptions@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3249:30
finishComponentSetup@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6801:19
setupStatefulComponent@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6728:25
setupComponent@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6667:36
mountComponent@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5220:21
processComponent@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5198:23
patch@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4873:27
componentUpdateFn@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5397:14
run@webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:216:19
setupRenderEffect/instance.update@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5428:16
callWithErrorHandling@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:326:32
flushJobs@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:516:30

What I did to fix it was changing the method to:

    methods: {
        generateImageHtmlArray(imagePaths) {
            return imagePaths.map(path => {
                return `<div class="video" style="background-image: url('${require('@/assets/' + path)}')"></div>`;
            });
        },
    },

So I removed the const variable for the base path and just used it immediately inside the require function.

I understand that error comes from how the components are loaded an the phases of mounting and when the methods are called, but my question here is what is the real problem.