[Vuejs]-Can't pass a foreign key selected from a dropdown in Vue.js to my API in DRF

In the html form I’ve added enctype="multipart/form-data" so that you can submit image or file too as you’re creating a product so there might be product image.

<form @submit.prevent="submitForm" enctype="multipart/form-data">
                    <div class="field">
                        <label>TITLE</label>
                        <div class="control">
                            <input type="text" class="input" v-model="name">
                        </div>
                    </div>

                    <div class="field">
                        <label>DESCRIPTION</label>
                        <div class="control">
                            <input type="text" class="input" v-model="description">
                        </div>
                    </div>

                    <div class="field">
                        <label>PRICE</label>
                        <div class="control">
                            <input type="number" class="input" v-model="price">
                        </div>
                    </div>

                    <div class="field">
                        <label>CATEGORY</label>
                        <select v-model="category">              
                            <option v-for="category in categoryList" :key="category.id" :value="category.id">{{ category.name }}</option>
                        </select>
                    </div>

                    <div class="notification is-danger" v-if="errors.length">
                        <p v-for="error in errors" v-bind:key="error">{{ error }}</p>
                    </div>

                    <div class="field">
                        <div class="control">
                            <button class="button is-dark">CREATE</button>
                        </div>
                    </div>
                </form>

in the script you need to return category as string not an object. Also need to add a header

<script>
    import axios from 'axios'
    import { toast } from 'bulma-toast'
    
    export default {
        name: 'CreatePost',
         data(){
            return{
                name: '',
                description: '',
                price: '',
                category: '',
                errors: [],
                categoryList: []
            }
        },
        mounted() {
            this.getCategoryList()
            document.title = 'Creating post | PLACE'
        },
        methods: {
            getCategoryList() {
                axios
                .get('/api/v1/category-list/')
                .then(response => {
                    this.categoryList = response.data
                })
                .catch(error => {
                    console.log(error)
                })
    
            },
            submitForm(){
                this.errors = []
    
                if (this.name === ''){
                    this.errors.push('Title input is requiered.')
                }
    
                if (this.description === ''){
                    this.errors.push('Description input is requiered.')
                }
    
                if (this.price === ''){
                    this.errors.push('Price input is requiered.')
                }
    
                if (!this.errors.length){
                    const config = {
                        headers: {
                        "content-type": "multipart/form-data",
                        },
                    };
                    let formData = new FormData();
                    formData.append("name", this.name);
                    formData.append("category", this.category);
                    formData.append("price", this.price);
                    formData.append("description", this.description);
    
                    axios
                        .post("/api/v1/create-post/", formData, config)
                        .then(response => {
                            toast({
                                message: 'Post created!',
                                type: 'is-success',
                                dismissible: true,
                                pauseOnHover: true,
                                duration: 2000,
                                position: 'bottom-right',
                            })
    
                            this.$router.push('/my-account')
                        })
                        .catch(error =>{
                            if (error.response){
                                for (const property in error.response.data) {
                                    this.errors.push(`${property}: ${error.response.data[property]}`)
                                }
    
                                console.log(JSON.stringify(error.response.data))
                            }else if (error.message){
                                this.errors.push('Something bad happened...')
                                
                                console.log(JSON.stringify(error))
                            }
                        })
                }
            }
        }
    }
    </script>

It will solve the frontend error.