Api plateforme et vue js

Bonjour à tous je travail actuellement sur un projet avec api plateforme et vuejs le sourci c'est que j'arrive pas à faire le post , j'ai une erreur sur la category au niveau de api plaforme lorsque je veux faire un post c'est sur cette forme si
{
"title": "string",
"content": "string",
"category": "api/categories/1"
"createdAt": "2022-07-12T10:40:59.470Z"
}

voici mon code pour le post sur vuejs

<template>
<div class="container mt-4">
<div class="">
<!-- <div v-if="err">
{{ err }}
</div>
-->
<div class="col-md-6 m-auto">
<div class="card mb-4">
<h5 class="card-header text-center text-muted">Ajouter un article</h5>
<div class="card-body">
<form @submit.prevent="articlePost">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Titre de l'article</label>
<input
type="text"
class="form-control"
id="exampleFormControlInput1"
placeholder="Titre de l' article"
v-model="title"
name="title"
/>
</div>
<div class="mb-3">
<label for="exampleFormControlSelect1" class="form-label">Categorie</label>

                    <select class="form-select" id="exampleFormControlSelect1" aria-label="Default select example" v-model="category" name="category">

                      <option selected  v-for="categorie in this.catego"  :key="categorie.id" :value="categorie.id">  {{ categorie.nom }} </option>

                    </select>
                  </div>
                  <div>
                    <label for="exampleFormControlTextarea1" class="form-label">Description</label>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" v-model="content" name="content"></textarea>
                  </div>
                   <div class="mb-3 mt-3">
                  <button class="btn btn-primary d-grid w-100" type="submit">Ajouter</button>
                 </div>
                  </form>
                </div>
              </div>
            </div>
            </div>
      </div>

</template>
<script>
import axios from 'axios'
export default {

// eslint-disable-next-line vue/multi-word-component-names
name: 'Article',
data(){

    return {
        catego:[],
        //err:null,
        title: '',
        content: '',

        category: '',

    }

},

mounted(){
    axios.get('https://127.0.0.1:8000/api/categories').then((response) =>{

        this.catego= response.data["hydra:member"]
       });
},

methods:{
     articlePost(){
         const articleData= {
           title:this.title,
           content: this.content,
           category: this.category
        };
       axios.post('https://127.0.0.1:8000/api/articles',articleData).then(
        res => {
            console.log(res)
        }
       ).catch(
        err => {

             console.log(err);
        }
       )

    }
}

}
</script>