Vuex Classic mode for store/ is deprecated and will be removed in Nuxt 3

Finally, after reading a lot of answers and blogs I figured out the solution.

Important:- Forgot what you know about vuex module in vue.js app. Using Vuex in nuxt.js is a bit different.

Solution:- Nuxt.js lets you have a store directory with every file corresponding to a module. Just add necessary files in the store directly you don't need to create and add files to 'modules' directory in store. index.js file is a special file and this is where we would put the logic that is not related to a module.

store/data.js

export const state = () => ({
  loadedPosts: []
});

export const mutations = {
  setPosts(state, posts){
    state.loadedPosts = posts;
  }
};

export const actions = {
  setPosts(vuexContext, posts){
    vuexContext.commit('setPosts', posts);
  }
};

export const getters = {
  loadedPosts(state){
    return state.loadedPosts;
  }
};

Using state in project

this.$store.data.loadedPosts

Using mutations in project

this.$store.commit('data/setPosts', [{id: '1',...}, {id: '2',...}]);

Using actions in project

this.$store.dispatch('data/setPosts', [{id: '1',...}, {id: '2',...}]);

Using getters in project

this.$store.getters['data/loadedPosts'];

Important References:-

1. Watch this video Nuxt.js tutorial for beginners - nuxt.js vuex store
2. Read this blog Efficiently understanding and using Nuxt + Vuex