Qwik JS - Dynamic class loads on server, but doesn't re-render on client on <Link> click

Question

What am I doing wrong?

export const NavLink = component$<LinkProps>((props) => {
  const location = useLocation();
  const pathname = location.url.pathname;

  return (
    <>
      <li>
        <Link
          href={props.href}
          is-active={pathname == props.href ? "1":"0"}
          class={[
            "block rounded py-2 pl-3 pr-4 transition-[hover] hover:bg-gray-100 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white lg:p-0 lg:hover:bg-transparent lg:hover:text-violet-700 lg:dark:hover:bg-transparent lg:dark:hover:text-blue-500",
            pathname == props.href ? "text-[red]" : "text-gray-900",
            {
            "bg-[blue]":pathname == props.href
            }
          ]}
        >
          <Slot />
        </Link>
      </li>
    </>
  );
});

enter image description here

I tested with attribute "is-acitve" and it updates in browser, but class doesn't change, class is changing only when I refresh page.