Поместите идентификатор в DRF API, но вызовите имя

Я действительно борюсь с этим, пока учусь. Я пытаюсь вызвать следующее:

 {
        "id": 2,
        "interest_name": "Money"
    },
    {
        "id": 3,
        "interest_name": "Django"
    },
    {
        "id": 4,
        "interest_name": "Test"
    },
    {
        "id": 5,
        "interest_name": "Inventory Management"
    },
    {
        "id": 6,
        "interest_name": "Design"
    }

With:

created () {
      getAPI.get('api/v1/projects/category')
      .then(response => {
        this.ProjectsAPI = response.data
        console.log('API Data Received')
      })
      .catch(errors => {
        console.log(errors)
      })

Я отображаю поле select следующим образом:

<select id="interest_category" name="interest_category" v-model="interest_category" multiple class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm">
   <option v-for="category in ProjectsAPI">{{ category.interest_name }}</option>
</select>

Я получаю следующее в моей визуализированной странице Vue:

Money
Django
Test
Inventory Management
Design

Теперь я пытаюсь выбрать опцию, но получаю эту ошибку при нажатии кнопки submit:

[{"non_field_errors":["Invalid data. Expected a dictionary, but got str."]}]}

Вот код моей формы:

submitForm(e) {
            const formData = {
                project_title: this.project_title,
                project_description: this.project_description,
                interest_category: this.interest_category,
                created_by: this.created_by
            }

            axios 
                .post("api/v1/projects/", formData)
                .then (response => {
                    console.log(response)

                    this.$router.push('/project-dashboard')
                })
                .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) {
                        console.log(JSON.stringify(error.message))
                    } else {
                        console.log(JSON.stringify(error))
                    }
                })
        }
    }

Я пытаюсь получить ID из первого вызова API и передать его вместо имени элемента. Когда я проверяю, вот что я вижу:

[
    "Money",
    "Django",
    "Test",
    "Inventory Management",
    "Design",
]

Как я могу преобразовать их в ID, которые я получаю от первого вызова API, чтобы отправить ID вместо строки interest_category

UPDATE

Я смог правильно выполнить значение, так что теперь он передает правильный ID, как показано в комментариях. Теперь я получаю эту ошибку.

Invalid data. Expected a dictionary, but got int.

submitForm(e) {
  const category = this.ProjectAPI.find(({ id }) => id == this.interest_category)
  const formData = {
    project_title: this.project_title,
    project_description: this.project_description,
    interest_category: category, // here
    created_by: this.created_by
  }