A list of 20-25 names is retrieved from an API, and I need to display them in a drop-down box as a requirement. Using Vue v-autocomplete, I am able to show the selected names on the field. I have included a custom item labeled Select All so that users can choose all the names in the drop-down list. However, when the user selects Select All, I only want the individually selected items to appear as chips in the autocomplete field, excluding the Select All chip.
Check out my attempt at implementing this in the following code sandbox. As someone new to Vue.js, I would appreciate any insights on how to manage the chips in v-autocomplete.