lose state between mutations and getters - Vuex/ Nuxt

I try to render components based on the state of the button clicked (navBar.vue).

I see the actions and mutations with the correct data but I cannot get the getters to retrieve the state of pageVisible (should be either perso-page or result-page). It is either:

• undefined
• nothing at all (no console.log)

I have tried many options like setting some async await but nothing was really successful. I am sure it is an obvious thing but I cannot pinpoint the reason why.

Please let me know if you see how I could get the correct state in the getters and call it on page.vue (for now it will not render anything but this is not the main point of this question).

Thank you!

page.vue

<template>
  <div class="container-week">
    <NavBar></NavBar>
    <InputPerso v-if="pageVisible === 'perso-page'"></InputPerso>
    <Results v-else></Results>
  </div>
</template>

<script>
import NavBar from '../components/week-seven/NavBar'
import InputPerso from '../components/week-seven/personalised/InputPerso'
import Results from '../components/week-seven/Results'

export default {
  name: 'Week7',
  components: {
    NavBar,
    InputPerso,
    Results
  },
  data() {
    return {
      pageVisible: ''
    }
  },
  computed: {
    getCurrentPage() {
      return this.$store.getters.currentPage
    }
  }
}
</script>

navBar.vue

<template>
  <div class="container">
    <ul class="container__links">
      <li>
        <button @click="setContentPage('perso-page')">
          Personalised
        </button>
      </li>
      <li>
        <button @click="setContentPage('result-page')">See result</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
      pageVisible: 'perso-page'
    }
  },
  methods: {
    setContentPage(page) {
      this.$store.dispatch('pageDisplayed', page)
    }
  }
}

index.js (store)

import actions from './actions'
import mutations from './mutations'
import getters from './getters'
import Vuex from 'vuex'

new Vuex.Store({
  state: () => ({
    pageVisible: 'perso-page'
  }),
  actions,
  mutations,
  getters,

})

actions.js

export const pageDisplayed = (context, payload) => {
  context.commit('PAGE_DISPLAYED', payload)
}

mutations.js

export const PAGE_DISPLAYED = (state, payload) => {
state.pageVisible = payload
}

getters.js

export const currentPage = (state, payload) => {
return state.pageVisible
}