Laravel and Vite - Cache Busting

I have a Laravel project that I just migrated from webpack to Vite, and now I'm having a issue when deploying to production using Vite.

Let me explain the problem then: So I'm currently doing "npm run build" locally and then deploying to my prod server, and everything gone perfectly fine for my first deploy. Now imagine that you are the user and you are already navigating the system, if I do run "npm run build" locally and then deploy again, and if you(user) are navigating the system without refreshing the page its giving errors in the console and the system crash:

1. Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. - Dashboard-a3d9187d.js:1
2. TypeError: Failed to fetch dynamically imported module: .../build/js/chunks/Dashboard-a3d9187d.js - app-5e80fa05.js:5

If i'm correct this is regarding "Cache Busting", I didn't have this problem with webpack.mix because of the version config:

mix.version();
mix.webpackConfig({
   output: {
      chunkFilename: 'js/[name].js?v=[chunkhash]'
   }
});

And using mix() in blade:

<script src="{{ mix('js/app.js') }}" defer></script>

With vite I use the "@vite" blade directive:

@vite(['resources/webapp/sass/app.scss', 'resources/webapp/js/app.js'])

Now using Vite with laravel i didn't found any solution for this, I have tried to change my output files, by removing the hash, etc etc but nothing worked, so not sure if its my vite.config thats wrong, see bellow my vite.config:

import {defineConfig, loadEnv} from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import path from "path";

export default ({mode}) => {
    return defineConfig({
        plugins: [
            laravel({
                input: [
                    'resources/webapp/sass/app.scss',
                    'resources/webapp/js/app.js',
                ],
                refresh: ['resources/webapp/**'],
            }),
            vue(),
            Components({
                dirs: ['resources/webapp/js/components/base'],
                extensions: ['vue'],
                deep: true,
                dts: false,
            }),
        ],
        build: {
            manifest: true,
            rollupOptions: {
                output: {
                    entryFileNames: '[name].js',
                    chunkFileNames: 'assets/[name].js',
                    assetFileNames: ({name}) => {
                        if (/\.(ico|gif|jpe?g|png|svg)$/.test(name ?? '')) {
                            return 'assets/img/[name][extname]';
                        }
                        return 'assets/[name][extname]';
                    },
                },
                input: {
                    main: 'resources/webapp/js/app.js',
                    app: 'resources/webapp/sass/app.scss',
                },
            }
        },
        // esbuild: {
        //     drop: mode !== 'development' ? ['console', 'debugger'] : [],
        // },
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "resources/webapp/js/"),
            }
        },
    });
}