After adding a new Post and trying to edit the same post, field remains empty

<template>
  <div class="card m-3">
    <div class="card-body">
      <Form method="post" @submit="submitData" :validation-schema="schema" ref="myForm" v-slot="{ errors, isSubmitting, handleReset }">
         <div class="form-group col-5">
            <Field name="id" type="hidden" class="form-control"  v-model="id" />
            <Field name="title" type="text" class="form-control" :placeholder="'Title'" v-model="post.title"  :class="{ 'is-invalid': errors.title }"/>
            <ErrorMessage name="title" />
          </div>
          <br/>
           <div class="form-group col-5">
            <Field name="author" type="text" class="form-control" :placeholder="'Author'"  v-model="post.author" :class="{ 'is-invalid': errors.author }"/>
            <ErrorMessage name="author" />
          </div>
          <br /><br />
          <b-button variant="primary" type="submit" :disabled="isSubmitting" :class="{ 'submitting': isSubmitting }"> {{ buttonText }}</b-button>
          &nbsp;&nbsp;&nbsp;
          <b-button variant="warning" @click="handleReset">Reset</b-button><br/>
      </Form>
    </div>
  </div>
  <br />
  <br />
    <table border="1" cellpadding="10" v-if="list != undefined && list.length">
      <tr>
        <td>Title</td>
        <td>Author</td>
        <td>Action</td>
      </tr>
      <tr v-for="post in list" :key="post.id">
        <td>{{ post.title }}</td>
        <td>{{ post.author }}</td>
        <td>
          <b-button variant="info" v-on:click="getEditUserDetails(post.id)"
            >Edit</b-button
          >
        </td>
      </tr>
    </table>
    <h1 v-else>No Records Found</h1>
</template>


<script>
import { createApp } from "vue";
import VueAxios from "vue-axios";
import axios from "axios";
import App from "../App.vue";
import { Form, Field, ErrorMessage } from "vee-validate";
import * as Yup from "yup";

const app = createApp(App);
app.use(VueAxios, axios);

export default {
  name: "Posts",
  components: {
    Form,
    Field,
    ErrorMessage,
  },
  data() {
   return {
      post: {
        title: null,
        author: null,
      },
      list: undefined,
      isEditMode: false,
      id: null,
      buttonText: "Add",
    };
  },
  computed:{
    schema() {
      return Yup.object({
      title: Yup.string().required("Title is required").nullable(),
      author: Yup.string().required("Author is required").nullable(),
    });
    },
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    submitData() {
      if (this.isEditMode) {
        axios
          .put("http://localhost:3000/posts/" + this.id, this.post)
          .then(() => {
            this.isEditMode = false;
            this.buttonText = this.isEditMode ? "Edit" : "Add";
            this.id = null;
        });
      } else {
        axios.post("http://localhost:3000/posts", this.post).then(() => {
          this.buttonText = this.isEditMode ? "Edit" : "Add";
        });
      }
      this.getUsers();
    },
    getUsers() {
      axios.get("http://localhost:3000/posts").then((result) => {
        this.list = result.data;
      });
    },
    getEditUserDetails(id) {
      axios.get("http://localhost:3000/posts/" + id).then((result) => {
        this.id = result.data.id;
        this.post.title = result.data.title;
        this.post.author = result.data.author;
        this.isEditMode = true;
        this.buttonText = this.isEditMode ? "Edit" : "Add";
      });
    },
  },
};
</script>

My vue/cli version is 4.5.13, vee-validate version is 4.4.11 and vue-axios version is 3.3.6

Whenever I add new data ad trying to edit immediately same data but v-model is not getting an update, so my input field remains empty, and when clicking on another available post and again clicking on added post it works fine.