Vue-Select reduce is not working - Showing ID instead of the label

I am using this vue select Getting and Setting | Vue Select for the dropdown countries. Here is the code:

<v-select
    v-model="project_data.country"
    :options="project_data.countries"
    :reduce="country => country.value" 
    label="label"
    :state="errors.length > 0 ? false : null"
/>

This project_data.country value is : 5
This project_data.countries value is array of object. Something like :

[
    { value : 1, label : Dhaka },
    { value : 2, label : India },
    and so on ......
]

Now on my local, I can see the label on the dropdown BUT when I complied the code using :

npm run prod

and compressed the whole project and upload to live server then I can see the ID instead of the label. Something like this:

enter image description here

Does anyone know why? I am spending tooooo many hours to figure it out :frowning: :frowning: :frowning:

My goal is to get the single ID value from the dropdown ( I can ) and save it to the database and then again show the label ( I can’t ) based on the single ID value.

Hello @creativeartbd,
you can use :reduce=“country => country.label”

Hello

No it’s not working