Vue hot reloading not working / re-rendering

Question

Hot reload seems to work - but actually doesn't re-render

Using laravel mix-6 and webpack to hot-reload Vue 3.

Steps to recreate:

• Hosting on homestead on a vagrant (VMBox)
• Starting hot load via npm run hot (which in turns fires mix watch --hot) outside the VM (i.e in separate terminal window in the project folder)
• Loading the website (coding.dev) and it loads the JS seemingly correctly (http://localhost:8080//js/newClaim.500a0b7a1895d1d4.hot-update.js)
• Save a text change in the .vue file
• Files re-compiled via webpack upon change successfully
• Browser seems to recognize the update (console shows message re-render)
• But the browser doesn't actually reflect the change (e.g. if text edited and saved in vue file the text doesn't change in the browser)
• Tested with multiple browsers (Chrome, Safari, ...)

Realize I'm not the first with this problem: Have searched multiple threads on SO and other places (e.g. Vue cli 3 hot reload suddenly not working in browsers)

Any help greatly appreciated. Added webpack and package.json below, lmk if you need anything else.

Thank you!

Webpack

let mix = require('laravel-mix');
require('laravel-mix-tailwind');

mix.js('resources/js/app.js', 'public/js')
.vue();

mix.js('resources/js/newClaim.js', 'public/js')
.vue();

mix.sass('resources/sass/app.scss', 'public/css')
.tailwind();

Package.json

{
  "private": true,
  "scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
  },
  "dependencies": {
    "@headlessui/vue": "^1.4.0",
    "@heroicons/vue": "^1.0.4",
    "@popperjs/core": "^2.6.0",
    "@tailwindcss/forms": "^0.2.1",
    "@toast-ui/chart": "^4.3.6",
    "@vuelidate/core": "^2.0.0-alpha.8",
    "@vuelidate/validators": "^2.0.0-alpha.5",
    "acorn": "^8.6.0",
    "autoprefixer": "^10.1.0",
    "es6-promise": "^4.2.8",
    "laravel-mix-tailwind": "^0.1.2",
    "moment": "^2.29.1",
    "postcss": "^8.2.1",
    "process": "^0.11.10",
    "qrcode.vue": "^3.2.2",
    "smoothscroll-polyfill": "^0.4.4",
    "tailwindcss": "^2.0.2",
    "vue": "^3.2.21",
    "vue-axios": "^3.2.5",
    "vue-barcode-reader": "^0.0.3",
    "vue-i18n": "^9.1.7",
    "vue-lazyload": "^1.3.3",
    "vue-qrcode-reader": "^3.0.0",
    "vue-resize-observer": "^2.0.15",
    "vue-toastification": "^2.0.0-rc.1",
    "vue3-click-away": "^1.2.1",
    "vue3-lazy": "^1.0.0-alpha.1",
    "vuelidate": "^0.7.6"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.2.21",
    "axios": "*",
    "cross-env": "^7.0.3",
    "laravel-mix": "^6.0.39",
    "lodash": "^4.17.19",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.32.0",
    "sass-loader": "^10.0.0",
    "vue-loader": "^16.0.0"
  }
}