[SOLVED] How can I show data names field in vue-multiselect plugin in edit page?

How can I show data names field in vue-multiselect plugin in edit page?

I have a vue laravel SPA, and was working on the edit page of employees page. I already have create employees page and can display data on the vue-multiselect plugin (https://vue-multiselect.js.org/). Right now, I can display the employee id's from an array in vue-multiselect in the edit page. How can I format it to show employee names?

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<script>
    import Multiselect from 'vue-multiselect'

    export default {
        components: { Multiselect },
        data() {
            return {
                employee: {
                    designation_id: [],
                    position_id: [],
                },
                designation_names: {},
                position_names: {}
            }
        },
        methods: {
            updateEmployee() {
                this.axios
                    .patch(`/api/employees/${this.$route.params.id}`, this.employee)
                    .then((res) => {
                        this.$router.push({ name: 'employees' });
                    });
            },
            async getDesignations(id) {
                const { data } = await this.axios.get(`/employees/${id}/designations`);
                this.$set(this.designation_names, id, data.join(', '));
            },
            async getPositions(id) {
                const { data } = await this.axios.get(`/employees/${id}/positions`);
                this.$set(this.position_names, id, data.join(', '));
            },
        },
        created() {
            this.axios
                .get(`/api/employees/${this.$route.params.id}`)
                .then((res) => {
                    this.employee = res.data;
                });
            for(const row of this.rows) { this.getDesignations(row.id); }
            for(const row of this.rows) { this.getPositions(row.id); }
        },
    }
</script>

<template>
    <form @submit.prevent="updateEmployee">
        <div class="flex space-x-6 md:w-3/4">
            <div class="md:w-3/6 mb-4 flex-1">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="name">First Name</label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline required" name="name" id="name" type="text" placeholder="First Name" tabindex="1" v-model="employee.first_name" />
                </div>
                <div class="md:w-3/6 mb-4 flex-1">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="name">Last Name</label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline required" name="name" id="name" type="text" placeholder="Last Name" tabindex="2" v-model="employee.last_name" />
                </div>
            </div>
            <div class="flex space-x-6 md:w-3/4">
                <div class="md:w-3/6 mb-4 flex-1">
                <label class="block text-gray-700 text-sm font-bold mb-2 required" for="designation_id">Designation</label>
                <multiselect
                    v-model="employee.designation_id"
                    :options="designation_options" 
                    :custom-label="opt => designation_options.find(designation => designation.id == opt).name"
                    :multiple="true"
                    :taggable="true"
                ></multiselect>
                </div>
                <div class="md:w-3/6 mb-4 flex-1">
                    <label class="block text-gray-700 text-sm font-bold mb-2 required" for="position_id">Position</label>
                    <multiselect
                    v-model="employee.position_id"
                    :options="position_options"
                    :multiple="true"
                    :taggable="true"
                ></multiselect>
                </div>
            </div>
            <div class="flex space-x-6 md:w-3/4">
                <div class="md:w-3/6 mb-4 flex-1">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="basic_pay">Basic Pay</label>
                    <div class="relative rounded">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <span class="text-gray-700">₱</span>
                    </div>
                    <input class="shadow appearance-none border rounded w-full py-2 pl-8 pr-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline required" name="basic_pay" id="basic_pay" type="number" step="any"  placeholder="00.00" tabindex="5" v-model="employee.basic_pay" />
                    <div class="absolute inset-y-0 right-0 flex items-center"><label for="basic_pay" class="sr-only">Basic Pay</label>
                    </div>
                </div>
            </div>
            <div class="md:w-3/6 mb-4 flex-1">&nbsp;</div>
        </div>
        <button type="submit" class="sm:hidden md:flex bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded outline-none focus:outline-none">Update</button>
    </form>
</template>

Solution

I've managed to solve this by retrieving each field, instead of the previous code which I retrieved all in a single object.

this.axios
    .get(`/api/designations/${this.$route.params.id}`)
    .then((res) => {
        this.form.name = res.data.name;
        this.form.description = res.data.description;
    });

Before:

this.axios
    .get(`/api/designations/${this.$route.params.id}`)
    .then((res) => {
        this.form= res.data;
    });