Vue app shows blank when accessing through network on development mode. Seems like it's not rendering

Question

I'm building a website using VueJs and it works perfect with no errors on the localhost, and I can access it locally in the same computer using the IP address as well. I used to be able to open the website within my network to test it using my phone with the IP address using port 8080. For some reason I can't do that anymore, my phone seems to be able to connect correctly because the console shows the firebase development warning but that's about it. It doesn't seem to be rendering the actual website since it shows blank.

last thing I remember installing before this happened was persistedState and I did so using npm like all the other plugins I use. I don't think this is causing the issue but I thought it was worth mentioning.

this is my Vue.config file:

const path = require("path");

module.exports = {
  publicPath:
    process.env.NODE_ENV === "production" ? "/metronic/vue/demo3/" : "/",
  configureWebpack: {
    resolve: {
      alias: {
        // If using the runtime only build
        vue$: "vue/dist/vue.runtime.esm.js" // 'vue/dist/vue.runtime.common.js' for webpack 1
        // Or if using full build of Vue (runtime + compiler)
        // vue$: 'vue/dist/vue.esm.js'      // 'vue/dist/vue.common.js' for webpack 1
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule("eslint")
      .use("eslint-loader")
      .tap(options => {
        options.configFile = path.resolve(__dirname, ".eslintrc.js");
        return options;
      });
  },
  css: {
    loaderOptions: {
      postcss: {
        config: {
          path: __dirname
        }
      },
      scss: {
        prependData: `@import "@/assets/sass/vendors/vue/vuetify/variables.scss";`
      }
    }
  },
  transpileDependencies: ["vuetify"]
};

this is my main.js (i skipped all the imports):

router.beforeEach(async (to, from, next) => {
  console.log("router");
  const user = await authf.currentUser;
  (user) ? await store.dispatch("fetchUserProfile", user) : "";
  const requiresAuth = await to.matched.some(record => record.meta.requiresAuth);
  const isAuthenticated = await store.state.userProfile;

  if (isAuthenticated.email != null) {
    (requiresAuth) ? next() : next("/Dashboard");
  } else {
    (requiresAuth) ? next("/Login") : next();
  }

  // reset config to initial state
  store.dispatch(RESET_LAYOUT_CONFIG);

  // Scroll page to top on every route change
  setTimeout(() => {
    window.scrollTo(0, 0);
  }, 100);
});

let app;

authf.onAuthStateChanged(async(user) => {
  if (user) {
    await store.dispatch('fetchUserProfile', user)
  }
});

new Vue({
  router,
  store,
  i18n,
  vuetify,
  firebase,
  axios,
  render: h => h(App)
}).$mount("#application");

when I do npm run serve it gives me the local access through localhost:8080 and the network access through 192.168.1.137:8080 as it always has. I have access with no console errors in my computer, but the app wont render when accessing through network.