Cannot read property 'push' of undefined - vue and axios - vue.js

Question

I have;
An API built from express running on port 2012
An Vue app running on port 8080
The Vue application communicates with the API using Axios.
I have been able to register users and log them in when the user clicks 'register' or 'login' it will submit their data to the API, if the API responses with an OK message, I use this.$router.push('/login') if a user successfully registered and this.$router.push('/dashboard') if a user is successfully logged in from the login page. However I continue to get "cannot read property 'push' of undefined" when I try to call this.$router.push on the dashboard vue.
login.vue (this.$router.push works)
<template>
<form id="login_form" method="post" v-on:submit.prevent="onSubmit">
<input type="text" name="username" class="form-control" v-model="auth.username" placeholder="username" />
<input type="password" name="password" class="form-control" v-model="auth.password" placeholder="password" />
<input type="submit" value="Submit" />
</form>
</template>
<script>
import Vue from 'vue'
import login_axios from '../axios/login_axios.js'
export default{
name: 'login_form',
data:function(){
return{
auth:{
username:'',
password:''
}
}
},
methods:{
onSubmit: login_axios.methods.onSubmit
},
components:{
login_axios
}
}
</script>
This login_vue component imports a javascript file called login_axios.js
login_axios contains a method called onSubmit which is called when the user clicks login/submit. onSubmit checks if res.data.auth.authenticated is true or false, if it is true, it executes this.$router.push to /dashboard, this works. However from the dashboard it does not work.
login_axios.js (this.$router.push works)
import Vue from 'vue'
import axios from 'axios'
import AxiosStorage from 'axios-storage'
let sessionCache = AxiosStorage.getCache('localStorage');
export default {
methods:{
async onSubmit(e){
e.preventDefault();
const res = await axios.post('http://myapi/login', this.auth);
try{
if(res.data.auth.authenticated){
sessionCache.put('authenticated', true);
this.$router.push('/dashboard');
}
} catch (error){
console.log(error);
}
}
}
}
Below is dashboard.vue which imports dashboard_axios.js
dashboard.vue (cannot read property 'push' of undefined)
<template>
<div>
<h1>Dashboard</h1>
Login
Register
Posts
About
</div>
</template>
<script>
import Vue from 'vue'
import dashboard_axios from '../axios/dashboard_axios.js'
export default {
name: 'dashboard',
methods:{
},
components:{
dashboard_axios
}
}
</script>
I have tried a few different things, but I have ended up setting self as a const of this. I defined the function verify_auth in dashboard_axios.js then called it directly after. I would expect this to work as it is just a function which should need called. I may be completely out of the loop as I am no expert at vue, but have been trying to research as much as I can.
dashboard_axios.js (cannot read property 'push' of undefined)
import Vue from 'vue'
import router from 'vue-router'
import axios from 'axios'
import AxiosStorage from 'axios-storage'
const self = this;
let sessionCache = AxiosStorage.getCache('localStorage');
sessionCache.put('authenticated', false);
console.log(sessionCache.get('authenticated'));
function verify_auth(){
if(sessionCache.get('authenticated')){
console.log('successfully verified authentication')
self.$router.push('/')
}else{
console.log('issue verifying authentication')
self.$router.push('/login')
}
}
verify_auth();
export default {
name: 'dashboard_axios',
methods:{
},
data: function() {
},
created: function(){
}
}

Answer 1

I am not 100% sure if this is the answer, but I have found a workaround.
I was importing javascript files such as 'dashboard_axios.js' which did not get loaded in as I wished it would. So instead, I renamed the file to 'dashboard_axios.vue' and added <template></template>, and left it empty, and then wrapped my js code in <script></script> then on the dashboard.vue I called the <dashboard_axios /> tag and it worked as I expected.