[Vuejs]-VueJS navbar active card indicator doesn't point on first load of component

One solution to this issue would be to move the call to this.fixIndicator from the mounted hook to the beforeRouteEnter hook in the route component that is being rendered. The beforeRouteEnter hook is called before a route is entered, after the route’s components have been resolved, so it would be a good place to update the active link indicator.

I have done something like this and it is not working, is it right way to call that event? There is no console.log, so the function doesn’t even execute.

export default {
  name: "Navbar",
  beforeRouteEnter(to, from, next) {
    console.log("test");
    this.fixIndicator();
  },
  data() {
    return {
      logo: logo,
      navLinks: [
        {
          route: "/",
          routeName: "home",
          name: "Home",
        },
        {
          route: "/about",
          routeName: "about",
          name: "About",
        },
        {
          route: "/team",
          routeName: "team",
          name: "Team",
        },
        {
          route: "/demo",
          routeName: "demo",
          name: "Demo",
        },
      ],
    };
  },
  methods: {
    moveIndicator(e) {
      const node = e.target;
      const nodeLeft = node.offsetLeft;
      const nodeWidth = node.offsetWidth;
      animate("#indicator", { width: `${nodeWidth}px`, left: `${nodeLeft}px` }, { duration: 0.2, easing: "ease-in-out" });
    },
    fixIndicator() {
      const node = this.activeLink();
      if (node == null) {
        console.error("Active link not found.");
        return;
      }
      const nodeLeft = node.offsetLeft;
      const nodeWidth = node.offsetWidth;
      animate("#indicator", { width: `${nodeWidth}px`, left: `${nodeLeft}px` }, { duration: 0.2, easing: "ease-in-out" });
    },
    activeLink() {
      return this.$refs.navigationLinks.find((link) => {
        return link.getAttribute("route-name") == this.$route.name;
      });
    },
  },
};