Computed property using `useRoute()` in Nuxt 3

I have a computed property that uses the current route to calculate the tab that the user is current on using this code:

const activeTabIndex = computed(() => {
    const route = useRoute();
    return navigation.findIndex((e) => {
        return route.fullPath.startsWith(e.href);
    });
});

However, testing it using this code:

router.afterEach((to, from) => {
    console.log(activeTabIndex.value);
});

Yields that the index only updates after the page is visited while already on it (and this is reflected in the actual UI). Basically:

1. User click page X
2. URL updates to X
3. User clicks page X again
4. Tab index updates to X