Vite hmr in child project not working

Hello! I have a project that consists of a main project written with Laravel, and javascript and a child project written with javascript, vue 3, and (since recently) vite. When building the project, build files from the child project get moved to the parent project which then acts as a single project handling everything.

The plan was to use the hmr capabilities of vite in order to increase development speed for the child project but when running npm run dev the server does start correctly and the hot file gets generated but there are seemingly no changes detected when editing code.

vite.config.js:

export default defineConfig({
	plugins: [
        laravel({
            input: [
               entryPoints
            ],
            refresh: [{
                paths: ['src'],
                config: { delay: 300 }
            }],
            publicDirectory: '../../../../../../public/build',
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    build: {
        outDir: '../../../../../../public/build',
        emptyOutDir: true,
    },
    envDir: '../../../../../../',
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `
                    @import "../../sass/all/bundle/vars-mixins-extends/mobile";
                    @import "../../sass/all/framework/typography";
                `,
            }
        }
    },
    server: {
        hmr: {
            host: 'localhost',
        }
    }
});

I have already tried changing the public and build directories but that only caused the hotfile to no longer be generated.

Any help would be appreciated