BrowserSync not working when on LTE connection or no Internet Connection

Question

My local dev environment (MBP) has apache running with a dynamic virtual host which allows me to have any project accessible via a consistent url structure: http://[client_name].[project_name].localhost

<Virtualhost *:80>
  VirtualDocumentRoot "/Users/mbp/repos/%1/websites/%2/public_html"
  ServerName sites.localhost
  ServerAlias *.*.localhost
  UseCanonicalName Off
  <Location /server-status>
    SetHandler server-status
    Order allow,deny
    Allow from all
  </Location>
</Virtualhost>

my package.json file includes a client and site key/value which is then imported into my gulpfile and makes these values accessible via pkg.client & pkg.site.

const { default: pkg } = await import("./package.json", {
  assert: {
    type: "json",
  },
});

My gulpfile.js inits browserSync

  browserSync.init({
    notify: false,
    proxy: pkg.client + '.' + pkg.site + '.localhost'
  });

When I run gulp, it opens a new browser window to http://localhost:3000

If i'm on a wifi connection, this works flawlessly. If i'm on a tethered LTE connection (Mobile Data), it will not load. If i turn off wifi and have no internet connection, it will not load.

I've tried browsersync option online

• https://browsersync.io/docs/options/#option-online

To further clarify, this is all being accessed from the same machine. I'm not trying to connect to a browsersync session from a separate device.

Has anyone encountered this and have a fix?