Module install order

Describe the bug

I have a guard file as a module

import type { UserModule } from "@/types";

// Setup Pinia
// https://pinia.vuejs.org/
export const install: UserModule = async ({ router, isClient }) => {
  if (isClient) {
    const authenticated = JSON.parse(localStorage.getItem("authenticated") ?? "");

    router.beforeEach(async (to, from, next) => {
      if (to.meta.requiresAuth && !authenticated) {
        next("/login");
      } else {
        next();
      }
    });
  }
};

but this guard working a bit late. I think the problem is it is being installed later. When I try to go private page for example /clients page and I am not authenticated, clients page being shown and then it goes to /login. I tried this in index.html and everything works properly.Here is what I wrote in index.html

<script>
      (function () {

        const authenticated = JSON.parse(localStorage.getItem("authenticated"));
        if (
          (window.location.pathname === "/leads" ||
            window.location.pathname === "/clients") &&
          !authenticated
        ) {
          window.location.pathname = "/login";
        }
      })();
    </script>

I left the website as a reproduction so you can check yourself

Reproduction

ucrm.atmu.uz

System Info

Shell
Windows

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Contributions

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests (actually just go ahead and do it, thanks!)