¿Alguien sabe por qué mis state.pages no se llenan con los datos json que busco con axios? Sin embargo, cuando cambio algo en mi archivo y lo guardo, para que vite se vuelva a cargar, los datos aparecen en la página. Y desaparecerá nuevamente cuando actualice la página en el navegador.

Vista de pagina:

 <template> <main v-if="page"> <h1>{{ page.title }}</h1> <div class="content" v-html="page.content"></div> </main> <main v-else> <h1>loading</h1> </main> </template> <script> import { mapGetters, mapActions } from "vuex"; export default { data() { return { page: null, }; }, methods: { ...mapActions({ getPages: "getPages" }), }, computed: { slug() { return this.$route.params.slug; }, getPage() { console.log(this.$store.state.pages); return (this.page = this.$store.state.pages.find( (page) => page.slug === this.slug )); }, }, mounted() { this.$store.dispatch("getPages"); this.getPages(); this.getPage; }, }; </script> <style> </style>

Índice Vuex:

 import { createStore } from 'vuex'; import axios from 'axios'; const store = createStore({ state() { return { pages: [], }; }, mutations: { setPages(state, { response }) { state.pages = response.data; }, }, actions: { getPages({ commit }) { axios.get('../src/data/pages.json').then((response) => { commit('setPages', { response }); }); }, }, getters: {}, }); export default store;