Vue form submits twice or once and empty

Question

I am new to javascript and Vue, I have made this simple form using CoreUI Vue and js and I submit the data on PostgreSQL.

In the code if I Use v-on:submit="postdata" it submits once and empty , if I use v-on:submit.prevent="postdata" it submits twice the first time empty and the second time right.

Please help I am stuck many days I can't find something wrong,

<template>
  <div>
    <CCard>
      <CCardHeader>
        <slot name="header"> <CIcon name="cibCcVisa" /> {{ caption }} </slot>
      </CCardHeader>
      <CForm id="myforma" v-on:submit="postdata">
        <CCardBody>
          <CRow>
            <CCol>
              <CInput name="title" label="title" placeholder="Enter Title" v-model="posts.title" id="title" />
            </CCol>
          </CRow>
          <CRow>
            <CCol>
              <CInput label="year" type="date" v-model="posts.year" name="year" />
            </CCol>
          </CRow>

          <CRow>
            <CCol>
              <CInput name="writer" label="writer" placeholder="Enter the writer" :v-model="posts.writer" />
            </CCol>
          </CRow>
          <CRow>
            <CCol sm="12">
              <CInput name="description" label="description" placeholder="Write the description" v-model="posts.description" />
            </CCol>
          </CRow>

          <CRow>
            <CCol lg="6">
              <CSelect label="type" name="type" :options="['1.Books', '2.Comics', '3.NOvels', '4.Writings']" :value.sync="posts.type" />
            </CCol>
          </CRow>
        </CCardBody>

        <CCardFooter>
          <CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle" /> Submit</CButton>
          <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
        </CCardFooter>
      </CForm>
    </CCard>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'forma',
  data(){
    return{
      posts: {
        title: '',
        year :'' ,
        writer:null,
        description:null,
        type: '1.Books'
      },
    }
  },
  props: {
    caption: {
      default: 'Thanasis Form'
    }
  },
  methods: {
    postdata() {
      axios.post('http://localhost/post.php',this.posts).then((response) => {this.posts= response.data;
      console.log(response.data)});
      console.log(this.posts);
    }
  }
}
</script>

<style></style>

<?php 
include "db.php";   

$received_data = json_decode(file_get_contents("php://input"),true);

$table= $received_data['title'];
$wri=$received_data['writer'];
    

$result=pg_query($connection,"INSERT INTO tablet (title) VALUES (' $table')");
?>