I have slight problem with Vue 3. Problem is that, first time when I visit the page, all looks good, but second time, when getter is loaded again, it will prerender the page. Basically I can see first load, delete first load and change with new one, but as I know it should just update the array and not prerender the fore ached table.

So here is what I messed up:

This is how my store file looks like:

export const forum = {
  state: {
    forum: []
  },

  actions: {
    async GET_FORUMS(commit: any, payload: any ) {
      API.get('/forum')
        .then((response: any) => {
          commit.commit('forum', response.data.data)
        }).catch((e) => (
          notif.error(e.message)
        )
      )
    }
  },

  mutations: {
    async forum(state: any, forum:any) {
      state.forum = forum
    },
  },

  getters: {
    forums(state:any) {
      return state.forum;
    },
  }
}

And here is the setup method in vue file.

const store = useStore();
const isLoading = ref(true)

const forums = computed(() => {
  return store.getters.forums
})

onBeforeMount(async () => {
  if (isLoading.value) {
    await store.dispatch('GET_FORUMS')
    isLoading.value = false
  }
});

What have I messed up here?