The recommended way to load route data before entering the route?

Before rendering a page for a given route, I’d like to synchronously fetch the necessary data first. Ideally, I’d like to have the data fetching within the page component, but I’m not opposed to doing it in the router files. I’ve read and tried various ways of doing it, but part of the challenge comes from the fact that there are also multiple ways of building components and the usage of certain features vary.

In my case, I’m building single file components using the Composition API and <script setup> syntax. The Vue Router documentation link talks about “fetching before navigation” in which I could reach for beforeRouteEnter or beforeRouteUpdate, but this is shown using the Options API. They do have the page for the Composition API mentioning I could use onBeforeRouteUpdate, but that uses the setup() function. I figured I’d try it out anyway with <script setup>:

<script setup>
import { onBeforeRouteUpdate } from 'vue-router';

onBeforeRouteUpdate(() => {
    console.log('onBeforeRouteUpdate');
});
</script>

However, this does not execute. The closest method I’ve tried that works is fetching the data in the router, using the beforeEnter guard, and setting the data onto the meta property, which can then get accessed on the route instance in the component:

beforeEnter: (to, from, next) => {
  fetch('https://pokeapi.co/api/v2/pokemon/ditto')
    .then(res => res.json())
    .then(res => {
    to.meta.pokemon = res;

    next();
  });
}

But with this, which is noted in the documentation, beforeEnter only triggers when entering the route. Params changes will not retrigger this, meaning that I’d have to set up a watcher on the route in the component anyway. I might as well just have had all this logic in the component itself.

I just can’t seem to find a good way to do this, but I might have overlooked something. If anyone has some pointers or advice, I’d appreciate it. Thanks in advance.