diff --git a/requirements.txt b/requirements.txt
index 36a6746f..aa518d41 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -27,7 +27,7 @@ uritemplate==3.0.1
 beautifulsoup4==4.10.0
 microdata==0.7.1
 Jinja2==3.0.1
-django-webpack-loader==1.4.0
+django-webpack-loader==1.4.1
 django-js-reverse==0.9.1
 django-allauth==0.45.0
 recipe-scrapers==13.4.0
diff --git a/vue/package.json b/vue/package.json
index f13cf358..1441637e 100644
--- a/vue/package.json
+++ b/vue/package.json
@@ -51,7 +51,7 @@
     "eslint-plugin-vue": "^7.10.0",
     "typescript": "~4.4.3",
     "vue-cli-plugin-i18n": "^2.1.1",
-    "webpack-bundle-tracker": "1.3.0",
+    "webpack-bundle-tracker": "1.4.0",
     "workbox-expiration": "^6.3.0",
     "workbox-navigation-preload": "^6.0.2",
     "workbox-precaching": "^6.3.0",
diff --git a/vue/src/apps/ModelListView/ModelListView.vue b/vue/src/apps/ModelListView/ModelListView.vue
index 7f8a4054..7a5fe8a8 100644
--- a/vue/src/apps/ModelListView/ModelListView.vue
+++ b/vue/src/apps/ModelListView/ModelListView.vue
@@ -140,7 +140,9 @@ export default {
   },
   computed: {
     headerComponent() {
-      return () => import(`@/components/${this.header_component_name}`)
+      // TODO this leads webpack to create one .js file for each component in this folder because at runtime any one of them could be requested
+      // TODO this is not necessarily bad but maybe there are better options to do this
+      return () => import(/* webpackChunkName: "header-component" */ `@/components/${this.header_component_name}`)
     }
   },
   mounted() {
diff --git a/vue/vue.config.js b/vue/vue.config.js
index beb599d1..689731a6 100644
--- a/vue/vue.config.js
+++ b/vue/vue.config.js
@@ -48,7 +48,7 @@ module.exports = {
     filenameHashing: false,
     productionSourceMap: false,
     publicPath: process.env.NODE_ENV === 'production'
-        ? ''
+        ? '/static/vue'
         : 'http://localhost:8080/',
     outputDir: '../cookbook/static/vue/',
     runtimeCompiler: true,