Dynamic routes based on request to other app

I'm currently creating an app in nuxt 3. This app has only one task:

1. Get and parse request url
2. pass request url params to other app via API
3. render one of pages conditionally, based on response

In my project I've got:

[...]
/pages
  - post.vue
  - user.vue
  - info.vue
  - [...]
app.vue
[...]

In app.vue

<template>
  <NuxtPage :name="data.page">
<template>

<script setup>
// here some shortened logic
const route = useRoute().fullPath;
const data = new RequestToBe(route).send();

console.log(data) // { page: 'post', ... }
</script>

How can I render my pages, based on data? Should I config router, or solve it by rendering logic?

What doesn’t work in your setup? Imagine you can check data.page before changing route:

<template>
  <NuxtPage />
</template>

<script setup>
// here some shortened logic

const router = useRouter()
const route = useRoute().fullPath;

try {
  const data = new RequestToBe(route).send();
  console.log(data) // { page: 'post', ... }
  if (data.page === 'post') {
    // go to post page
    router.push('/post')
  } else {
    // or do something else
  }
} catch (error) {
  // something went wrong
  console.log(error)
}
</script>

</details>