Form.vue

<template>
  <a-form-model ref="ruleForm" :model="milestone_data" :rules="rules">
      <a-form-model-item ref="name" label="Name" prop="name">
        <a-input v-model="milestone_data.name" />
      </a-form-model-item>

      <a-form-model-item ref="start_date" label="Start Date" prop="start_date">
        <a-date-picker v-model="milestone_data.start_date" />
      </a-form-model-item>

      <a-form-model-item ref="end_date" label="End Date" prop="end_date">
        <a-date-picker v-model="milestone_data.end_date" />
      </a-form-model-item>
    </a-form-model>
</template>

<script>
import { mapGetters, mapState } from "vuex";

export default {
  props: {},

  data() {
    return {
      milestone_data: {},
      rules: {
        name: [
          {
            required: true,
            message: "Name is required",
            trigger: "blur",
          },
        ],
        start_date: [
          {
            required: true,
            message: "Start Date is required",
            trigger: "change",
          },
        ],
        end_date: [
          {
            required: true,
            message: "End Date is required",
            trigger: "change",
          },
        ],
      },
    };
  },

  computed: {

    createApiData() {
      return {
        ...this.milestone_data,
        start_date: this.milestone_data.start_date.format('YYYY-MM-DD'),
        end_date: this.milestone_data.end_date.format('YYYY-MM-DD'),
      };
    },
  },
  
};
</script>