How can I show a different value apart from the dropdown options in v-select in vue 2 js - vuejs2

Question

Well the scenario is when the selectedFruits is having some element then I need to show "Fruits Selected" and If there is no fruit selected it should display "Select Fruits" in the select. Below is my template and the data I am using. So basically it won't show the fruits selected but display the messages mentioned above in the v-select dropdown. I am new to the vue js, so wondering whether this is possible or not? or is there any alternate way to achieve the same scenario.
<template>
<div>
<v-select
v-model="selectedFruits"
:items="fruits"
label="name"
multiple
/>
</div>
</template>
<script>
export default {
data() {
return {
fruits: [
{ name: 'Apple' },
{ name: 'Mango' },
{ name: 'Banana' },
{ name: 'Berries' },
{ name: 'Muskmelon' }
],
selectedFruits: []
}
}
}
</script>

Answer 1

Well, I found that there is an option called selection which we can use with v-slot through which I am able to achieve the desired result. Below is the changes I made in my code:
<template>
<div>
<v-select
v-model="selectedFruits"
:items="fruits"
label="Select Fruits"
multiple
>
<template v-slot:selection="{ item, index }">
<span v-if="index === 0">{{
item && "Fruits Selected"
}}</span>
</template>
</v-select>
</div>
</template>
<script>
export default {
data() {
return {
fruits: [
{ name: 'Apple' },
{ name: 'Mango' },
{ name: 'Banana' },
{ name: 'Berries' },
{ name: 'Muskmelon' }
],
selectedFruits: []
}
}
}
</script>