Vue MultiSelect's Custom Label not working?

Question

I have 2 MultiSelect dropdowns - one with a 'Single' mode and one with 'Tags' mode. I'd like to display a custom label on both, which contains two properties from the options, but that doesn't seem to work - both dropdowns still only show the 'normal' label (in both cases that's just the name of the option).

<MultiSelect v-model="booking" :options="clients" :object="true" :searchable="true" :custom-label="({ name, tel }) => `${name} - [${tel}]`" valueProp="id" label="name" trackBy="name" placeholder="Pick client" />
<MultiSelect v-model="invoice" mode="tags" :object="true" :options="services" :searchable="true" :custom-label="({ name, price }) => `${name} - [${price}]`" valueProp="id" label="name" trackBy="name" placeholder="Add Services" />

Format of the options:

const clients = ref([{ 
    name: 'John Davis',
    tel: '88888888', 
    address: 'London, UK'
  }, { 
    name: 'David Smith', 
    tel: '77777777', 
    address: 'NY, USA'
  }]);

const services = ref([{ 
    name: 'Marketing',
    service: 'Do some marketing', 
    price: '£150.00'
  }, { 
    name: 'Sales', 
    service: 'Do some sales', 
    price: '£100.00'
  }]);

What has gone wrong?

Answer 1

I test your code in here and found that this is working.

Maybe there is a problem with the version that you are using. If you are using vue3, install vue-multiselect@next.