Why isn't my Vue3 Router params working properly on redirect?

Question

In my Vue3 Quasar project I have the following router link to redirect to a page and send a param in the url to be used in the page that is being redirected to. If Ii enter the url with the param the page works normally, however if I redirect to it nothing works. What am I missing here? I jjust want to be able to show the route param and use it to perform an api call to show it's results.

Router link on first page: My route in my routes.ts file is as follows:

{
  path: '/nextpage/:id',
  name: 'nextPage',
  component: () => import('layouts/MainLayout.vue'),
  children: [{ path: '', component: () => import('pages/DetailsPage.vue') }],
},

My nextPage:

<template>
  <q-page class="row items-center justify-evenly">
    {{ route.params.id }}
    <SomeComponent :data="store.details" />
  </q-page>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { myStore} from 'stores/myStore';
import SomeComponent from 'components/SomeComponent .vue';

const store = myStore();

export default defineComponent({
  name: 'NextPage',
  components: { SomeComponent },
  setup() {
    const route = useRoute();
    let currentRoute = computed(() => {
      return route.params; 
    });
    onMounted(() => {
      store.getInfo(route.params.id as string);
    });
    watch(currentRoute, () => {
      store.getInfo(route.params.id as string);
    });
    return { route, store };
  },
});
</script>