Programatically use ion-nav-link to push new component

Ionic Framework Ionic Vue
1

How do you use the different ion-nav methods programmatically?

2
3

Doesn’t seem like it can find the NavController in my vue component

4

Main component

<template>
  <ion-page>
    <Loading :showLoading="showLoading" message=""></Loading>
    <ion-nav :root="PageOne"></ion-nav>
  </ion-page>
</template>

PageOne component

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Page One</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <h1>Page One</h1>
<!--      <ion-nav-link router-direction="forward" :component="component">-->
        <ion-button @click="goToPageTwo()">Go to Page Two</ion-button>
<!--      </ion-nav-link>-->
    </ion-content>
  </ion-page>
</template>

It works with the ion-nav-link, but not sure how to implement the same functionality programmatically.
This is what it goToPageTwo currently does on PageOne, which doesn’t do anything and doesn’t give me any errors either

const ionRouter = useIonRouter();

    function goToPageTwo() {
      ionRouter.navigate(PageTwo, 'forward', 'push');
    }
5

I like to use the vue-router. From Vue Navigation: Use Ionic + Vue Router to Create Multi-Page Apps

<ion-button @click="() => router.push('/detail')">Go to detail</ion-button>

import { useRouter } from 'vue-router';
const router = useRouter();