The application is not getting any posts from mongodb

I got this problem that whenever go to posts in the navbar the posts from the mongodb does not show.


Posts





Create Post



    <table class="table table-hover">
      <thead>
        <tr>
          <th>Title</th>
          <th>Body</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <!-- Prints out every post in my list -->
        <tr v-for="post in allPosts" :key="post._id">
          <td>{{ post.title }}</td>
          <td>{{ post._id }}</td>
          <td>{{ post.body }}</td>

          <td>
            <!-- Links to my EditComponent -->
            <router-link
              :to="{ name: 'edit', params: { _id: $route.params.id } }"
              class="btn btn-primary"
              >Edit</router-link
            >
          </td>
          <td>
            <!-- Should delete my post -->
            <button class="btn btn-danger" @click="deletePost(post._id)">
              Delete
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "IndexComponent",
  // Actually no idea why this method is here, what should i put here?
  methods: {
    ...mapActions(["fetchPosts", "deletePost", "updatePost"]),

    // onDblClick(post) {
    //   const payload = {
    //     id: post.id,
    //     title: post.title,
    //     completed: !post.completed,
    //   };
    //   this.updPost(payload);
    // },
  },
  // COMPUTED - to define which getters to use..action to get
  computed: { ...mapGetters(["allPosts"]) },
  created() {
    this.fetchPosts();
  },
};
</script>

So to get posts from mongodb i use this router code in my backend:

postRoutes.route("/").get(function (req, res) {
      console.log("getting");
   Post.find(function (err, posts) {
        if (err) {
          res.json(err);
        } else {
          res.json(posts);
          console.log(posts);
        }
      });
    });

Then i have this in my vuex:
// here should be added: state, getters, actions, mutations

import axios from "axios";
const state = {
  posts: [],
};

const getters = {
  allPosts: (state) => state.posts,
  getPost: (state) => (_id) => state.posts.find((e) => e._id === _id),
};

const actions = {
  //an action: makes a request, gets a response and calls a mutation
  async fetchPosts({ commit }) {
    // commit - to call the mutation
    const response = await axios.get("http://localhost:4000/posts");
    commit("setPost", response.data);
  },
  async addPost({ commit }, { title, body }) {
    const response = await axios.post("http://localhost:4000/posts/add", {
      title,
      body,
      completed: false,
    });
    console.log(title, body);
    commit("newPost", response.data);
  },
  async deletePost({ commit }, _id) {
    await axios.delete(`http://localhost:4000/posts/delete/${_id}`);
    commit("removePost", _id);
  },

  async updatePosts({ commit, state }, post) {
    // Find index of post

    const index = state.posts.findIndex((posts) => posts._id === post._id);

    // Return early here if post is not found in state
    if (index === -1) return;

    // Send api request
    await axios.post(`http://localhost:4000/posts/update/${post._id}`);

    console.log("response");

    // Commit changes in state
    commit("change", index, post);
  },
};

const mutations = {
  setPost: (state, posts) => (state.posts = posts),
  newPost: (state, posts) => state.posts.unshift(posts),
  removePost: (state, _id) =>
    (state.posts = state.posts.filter((post) => post._id !== _id)),
  change(state, index, payload) {
    state.posts[index] = payload;
  },
};

export default {
  state,
  getters,
  actions,
  mutations,
};

//this is a boilerplate for vuex module

Full route code:
const express = require(“express”);
const postRoutes = express.Router();

// Require Post model in our routes module
let Post = require("../models/post.model");

// Defined store route
postRoutes.route("/add").post(function (req, res) {
  console.log("hi");
  let post = new Post({ title: req.body.title, body: req.body.body });
  post
    .save()
    .then(() => {
      res.status(200).json({ business: "business in added successfully" });
      console.log(req.body.title, req.body.body);
    })
    .catch(() => {
      res.status(400).send("unable to save to database");
    });
});

// Defined get data(index or listing) route
postRoutes.route("/").get(function (req, res) {
  console.log("getting");

  
  Post.find(function (err, posts) {
    if (err) {
      res.json(err);
    } else {
      res.json(posts);
      console.log(posts);
    }
  });
});

// Defined edit route
postRoutes.route("/edit/:id").get(function (req, res) {
  console.log("edit");
  let _id = req.params._id;
  Post.findById(_id, function (err, post) {
    if (err) {
      res.json(err);
    }
    res.json(post);
    console.log("post");
  });
});

//  Defined update route
postRoutes.route("/update/:id").post(function (req, res) {
  console.log("upd");
  Post.findById(req.params.id, function (err, post) {
    console.log("update");
    if (!post) res.status(404).send("data is not found");
    else {
      post.title = req.body.title;
      post.body = req.body.body;

      post
        .save()
        .then(() => {
          res.json("Update complete");
          console.log("update");
        })
        .catch(() => {
          res.status(400).send("unable to update the database");
        });
    }
  });
});

// Defined delete | remove | destroy route
postRoutes.route("/delete/:id").delete(function (req, res) {
  console.log("del");
  Post.findByIdAndRemove({ id: req.params.id }, function (err) {
    if (err) res.json(err);
    else res.json("Successfully removed");
    console.log("delete");
  });
});

module.exports = postRoutes;