Vue-Native Router not re-routing to new screen (React-Native)

I am using vue-native-router in my project. I have it set up as follows:

App.Vue

<template><app-navigator></app-navigator></template><script>  import {  createAppContainer,  createStackNavigator,  } from "vue-native-router"; import HomeScreen from "./homescreen" import InfoScreen from "./infoscreen" const StackNavigator = createStackNavigator(   {     Home: HomeScreen,     Info: InfoScreen    },   {      initialRouteName: 'Home',   }  );  const AppNavigator = createAppContainer(StackNavigator);  export default {    components: { AppNavigator }, }</script>

I have two separate Vue Components making up HomeScreen,

within one of those components, I am trying to change the StackNavigator from HomeScreen to InfoScreen:

<button @press="changeScreen" :title =  (data.name) />

Here is what change screen looks like:

 changeScreen() {    console.log("CLICKED")    this.navigation.navigate("Home");  },

changeScreen is called, and the console log will run but navigation is unaffected. Interestingly this.navigation is null.... So I wonder if I have set up my navigator incorrectly? Should I register the navigator in index.js somehow??

If it is any help, here is the official documentation and the guide that I am following. https://vue-native.io/docs/vue-native-router.html

Thanks for the help!