Vuex state & getters not retrieving store data in Vue cli 3 - vuejs2

Question

Working with Vue cli 3 and vuex for the first time and trying to get a simple login working with vuex but the getters I have setup are not getting any data from the vuex store and just return nothing even with a state change.
Here's my store.ts:
export default new Vuex.Store({
state: {
loggedIn: true,
email: 'test',
password: 'test',
},
getters: {
loggedIn(state) {
return state.loggedIn;
},
userEmail(state) {
return state.email;
},
},
mutations: {
login(state, user) {
state.loggedIn = true;
state.email = user.e;
state.password = user.p;
},
logout(state) {
state.loggedIn = false;
},
},
actions: {
login(context, data) {
context.commit('login', data);
},
logout(context) {
context.commit('logout');
},
},
});
and the navbar.vue where im trying to change the nav based on if a user is logged in.
html
<template>
<nav id="nav" class="navbar fixed-top navbar-expand-md navbar-light bg-light">
<router-link to="/" class="navbar-brand">Navbar</router-link>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNav" aria-controls="topNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="topNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<router-link to="/" class="nav-link">Home</router-link>
</li>
<li class="nav-item" v-if="loggedIn">
<router-link to="/Dashboard" class="nav-link">Dashboard</router-link>
</li>
<li class="nav-item" v-else>
<router-link to="/Login" class="nav-link">Login</router-link>
</li>
<li class="nav-item">
<p class="nav-link">user : {{ test }}</p>
</li>
</ul>
</div>
</nav>
</template>
typescript
import { Component, Vue } from 'vue-property-decorator';
import { mapState, mapGetters } from 'vuex';
#Component({
computed: mapState(['loggedIn']),
})
#Component
export default class NavBar extends Vue {
private test: string = 'test';
constructor() {
super();
}
}