Popover used as navigation submenu doesn't show active style based on current route. Vue3, Inertija.js, TailwindUI

[kskrlinnorth2]

I am using Laravel with Inertia.js and Vue v3. I have persistent layout which has navbar with regular links and popover/submenu links.
When using active style on regular links (breeze vue component NavLink in this case), it works (it shows correct active style on route change):

<NavLink
  :href="route('admin.users.index')"
  :active="route().current('admin.users.*')"
  >Users</NavLink
>

But when using same approach with Popover and trying to show active state on PopoverButton it doesn't work (until I click again on that same button) so visualy looks terrible and as bug:

...
<PopoverButton class="inline-flex items-center text-sm leading-5 font-semibold self-center rounded-full focus:outline-none transition duration-150 ease-in-out"
  :class="route().current('admin.settings.*') ? 'text-primary' : 'text-white'"
>
  <span>Settings</span>
  <ChevronDownIcon class="h-5 w-5 ml-2" aria-hidden="true" />
</PopoverButton>
...

If I would use non-persistent layouts it would work since it rerenders whole layout on each route change. But how to make it work with persistent layout? I tried to make computed boolean property settingsNavActive, but prop is not getting updated on route change. Also, I tried to use vue watch on route() and route().current() change, but no luck.

[kskrlinnorth2]

I fixed it using this code:

import { Inertia } from "@inertiajs/inertia";

const settingsNavActive = ref(false);

Inertia.on("navigate", () => {
  settingsNavActive.value =
    route().current("admin.settings.*");
});

<PopoverButton :class="settingsNavActive ? 'active-classes' : 'non-active-classes'">
  <span>Settings</span>
  <ChevronDownIcon class="h-5 w-5 ml-2" aria-hidden="true" />
</PopoverButton>

Also, popover is not auto-closed when using persistent layouts, so there is one more "fix" to close it on route change:

<PopoverPanel v-slot="{ close }">
  <!-- html to show links -->
  <Link :href="route('admin.settings.some-page')" @click="close()">Some settings page</Link>
</PopoverPanel>

If anyone has different or better solution for this use case other than using Inertia navigate event, I would love to hear about it.