I need to be able to post and delete my data in my application

I got three components called CreateComponent, EditComponent, IndexComponent.
In my CreateComponent I have form where i can create a post and I pass the data title and body.
In my IndexComponent I gather all the posts and have this button on each post where you can press edit or delete. I have put some comments between some codeblocks to explain how I thought when wiriting the code.

IndexComponent.vue
    <template>
  <div>
<h1>Edit Post</h1>
<form @submit.prevent="updatePost">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label>Post Title:</label>
        <input type="text" class="form-control" v-model="post.title" />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label>Post Body:</label>
        <textarea
          class="form-control"
          v-model="post.body"
          rows="5"
        ></textarea>
      </div>
    </div>
  </div>
  <br />
  <div class="form-group">
    <button
      class="btn btn-primary"
      @click="onDblClick({ post: post.title, post: post.body })"
    >
      Update
    </button>
  </div>
</form>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "EditComponent",
  data() {
return {
  post: {
    title: "",
    body: "",
  },
};
  },
  methods: {
...mapActions(["fetchPosts", "updPost"]),
onDblClick(post) {
  const payload = {
    id: post.id,
    title: post.title,
    completed: !post.completed,
  };
  this.updPost(payload);
},
  },
  // COMPUTED - to define which getters to use
  computed: { ...mapGetters(["allPosts"]) },
  created() {
this.fetchPosts();
  },
};
</script>

So when pressing delete the action is unknown but when i press update it takes me to EditComponent.
But when I press the update button i get errors:
Property of title and body is not defined
Params are undefined
Error on v-handler

<template>
  <div>
    <h1>Edit Post</h1>
    <form @submit.prevent="updatePosts">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Post Title:</label>
            <input type="text" class="form-control" v-model="title" />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Post Body:</label>
            <textarea class="form-control" v-model="body" rows="5"></textarea>
          </div>
        </div>
      </div>
      <br />
      <div class="form-group">
        <!-- When clicking button it maybe should pass title and body to the data -->
        <button
          class="btn btn-primary"
         
          @click="onDblClick({ title: body.title, body: body.body })"
        >
          Update
        </button>
      </div>
    </form>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "EditComponent",
  data() {
    return {
      post: {
        title: "",
        body: "",
      },
    };
  },
  // this method then calls my mapaction updatePost and gives the parameters?
  methods: {
    ...mapActions(["fetchPosts", "updatePosts"]),
    onDblClick(post) {
      const payload = {
        id: post.id,
        title: post.title,
        completed: !post.completed,
      };
      this.updatePosts(payload);
    },
  },
  // COMPUTED - to define which getters to use
  computed: { ...mapGetters(["allPosts"]) },
  created() {
    this.fetchPosts();
  },
};
</script>

Backend router code:

/ 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) {
  Post.findById(req.params.id, function (err, post) {
    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) {
  Post.findByIdAndRemove({ _id: req.params.id }, function (err) {
    if (err) res.json(err);
    else res.json("Successfully removed");
    console.log("delete");
  });
});

And vue code -> main.js

const routes = [
              {
                name: "home",
                path: "/",
                component: HomeComponent,
              },
              {
                name: "create",
                path: "/create",
                component: CreateComponent,
              },
              {
                name: "posts",
                path: "/posts",
                component: IndexComponent,
              },
              {
                name: "edit",
                path: "/edit/:id",
                component: EditComponent,
              },
            ];

My post.js file:

import axios from "axios";

const state = {
  posts: [],
};

const getters = {
  allPosts: (state) => state.posts,
};

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 deletePosts({ commit }, id) {
    await axios.delete(`http://localhost:4000/posts/delete/${id}`);
    commit("removePosts", id);
  },

  async updatePosts({ commit }, updPosts) {
    const response = await axios.put(
      `http://localhost:4000/posts/update/${this.$route.params.id}`,
      updPosts
    );
    console.log("response");
    commit("updPosts", response.data);
  },
};

const mutations = {
  setPost: (state, posts) => (state.posts = posts),
  newPost: (state, posts) => state.posts.unshift(posts),
  removePost: (state, id) =>
    (state.posts = state.posts.filter((posts) => posts.id !== id)),
  updatePosts: (state, updPosts) => {
    const index = state.Posts.findIndex((posts) => posts.id === updPosts.id);
    if (index !== -1) {
      state.posts.splice(index, 1, updPosts);
    }
  },
};

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

//this is a boilerplate for vuex module