this issue has been plaguing my large production website for a while now.

My app.js (compiled by webpack) has multiple Vue components in it:

Vue.component(
    'product-import', 
    () => import(
        /* webpackChunkName: "product-import" */
        './components/product_import/ProductImport.vue'
    )
);

Whenever I add a new component to this file, and push my code to production... every single Vue module appears blank. The only way to solve this issue is to either:

1: Every user hard refresh the browser's cache (Ctr, Shift, R)

2: Rename EVERY SINGLE vue componenets (let's say from <clock></clock> to <clock2></clock2>) referenced in every file on my website.

I have versioning enabled mix.js('resources/assets/js/app.js', 'public/js/app2.js').version();

And I've even tried renaming the app.js file, yet each time I add a new component it requires a hard refresh from every one of our users for them to be able to see any Vue module again on our site.

This deters me from adding new Vue components, as I have to rename every single component (and sub-component) referenced in all files. Does anyone have a fix for this?