select all checkbox inside vuetify select not working with composition API

Solution for select all checkbox inside vuetify select not working with composition API
is Given Below:

I am trying to add a select all checkbox inside v-select. It’s working fine with options API in vue js. But when working with composition API, couldn’t find a way to workable it yet. My attempt is as below.

     setup() {
       const fruits = ['Apples', 'Apricots', 'Avocado', 'Bananas']
       let selectedFruits = []
       const likesAllFruit = computed(() => {
         return selectedFruits.length === fruits.length
       })
       const likesSomeFruit = computed(() => {
         return selectedFruits.length > 0 && !likesAllFruit.value
       })
       const icon = computed(() => {
         if (likesAllFruit.value) return 'mdi-close-box'
         if (likesSomeFruit.value) return 'mdi-minus-box'
         return 'mdi-checkbox-blank-outline'
       })
       const toggle = async () => {   
         if (likesAllFruit.value) {
           selectedFruits = []
         } else {
           selectedFruits = fruits.slice()
         }
         await nextTick()
       }
       return {
        fruits,
        selectedFruits,
        likesAllFruit,
        likesSomeFruit,
        icon,
        toggle,
      }
    },

I used https://vuetifyjs.com/en/components/selects/#append-and-prepend-item to build this as per in the document. Anyone knows where I was wrong this with in composition API?

(I am using vue js 2 version with composition API plugging)

Below way works.

setup() {
  const fruits = ref([
    { text: 'Apples', value: 'Apples' },
    { text: 'Apricots', value: 'Apricots' },
    { text: 'Avocado', value: 'Avocado' },
    { text: 'Bananas', value: 'Bananas' },
  ])
  let selectedFruits = ref([{}])
  const likesAllFruit = computed(() => {
    return selectedFruits.value.length === fruits.value.length
  })
  const likesSomeFruit = computed(() => {
    return selectedFruits.value.length > 0 && !likesAllFruit.value
  })
  const icon = computed(() => {
    if (likesAllFruit.value) return 'mdi-close-box'
    if (likesSomeFruit.value) return 'mdi-minus-box'
    return 'mdi-checkbox-blank-outline'
  })
  const toggle = async () => {
    if (likesAllFruit.value) {
     selectedFruits.value = []
    } else {
     selectedFruits.value = fruits.value.slice()
    }
    await nextTick()
  }
  return {
    fruits,
    selectedFruits,
    likesAllFruit,
    likesSomeFruit,
    icon,
    toggle,
  }
},

Thanks all!!!