browser-sync not rendering anything

I have an existing Laravel project that is runs together with Vue that was injected using artisan ui vue. I've successfully exposed and run laravel container to my host machine using artisan serve --host=0.0.0.0 --port=8000. When i access localhost:8000 to the browser, it works and renders the project completely fine. When i run 'npm run watch', the project compiles successfully and it watches whenever/whatever changes i make to the project.

The problem is when i try to access localhost:3000, it just keeps on loading without showing anything, not even error if there are any.

Current setup:

Host machine: Windows 11 (using WSL2)

Dev dependencies used to watch changes and to compile

"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.0.1",
"laravel-mix": "^4.0.7",
"laravel-mix-bundle-analyzer": "^1.0.5",

Compose file

backend:
    build:
        context: ./
        dockerfile: php.Dockerfile
    container_name: php-container
    working_dir: /var/www/html/
    ports:
      - 8000:8000
    volumes:
      - ./src:/var/www/html/
    command: php artisan serve --host=0.0.0.0
    tty: true

frontend:
    image: node:14-alpine
    container_name: app-vue
    volumes:
      - ./src:/var/www/html
    working_dir: /var/www/html
    ports:
      - 3000:3000
      - 3001:3001
    tty: true

browserSync

mix.browserSync({
    proxy: 'http://localhost:8000/',
    open: false // Already tried having this set on true but it still does not fix the issue.
});