Приклад Компонента Combobox Vuetify 3 frontend vue 3 ui/ux верстка nodejs

Реалізувати функціональність за допомогою стандартних можливостей v-combobox.

Є така структура даних об'єктів:

const items = ref([

  { title: 'Морква', text: 'Солодка морква', tags: ['овочі', 'помаранчевий'], id: 1 },

  { title: 'Картопля', text: 'Ніжна картопля', tags: ['овочі', 'коричневий'], id: 2 },

  { title: 'Огірок', text: 'Свіжий огірок', tags: ['овочі', 'зелений'], id: 4 },

  { title: 'Помідор', text: 'Соковитий помідор', tags: ['овочі', 'червоний'], id: 5 },

  { title: 'Кабачок', text: 'Ніжний кабачок', tags: ['овочі', 'зелений'], id: 6 },

  { title: 'Цибуля', text: 'Пікантна цибуля', tags: ['овочі', 'білий'], id: 7 },

  { title: 'Перець', text: 'Солодкий перець', tags: ['овочі', 'червоний'], id: 8 },

  { title: 'Баклажан', text: 'Ніжний баклажан', tags: ['овочі', 'фіолетовий'], id: 9 },

  { title: 'Буряк', text: 'Солодкий буряк', tags: ['овочі', 'червоний'], id: 10 },

  { title: 'Капуста', text: 'Свіжа капуста', tags: ['овочі', 'зелений'], id: 11 },

  { title: 'Яблуко', text: 'Соковите яблуко', tags: ['фрукти', 'червоний'], id: 12 },

  { title: 'Банан', text: 'Солодкий банан', tags: ['фрукти', 'жовтий'], id: 13 },

  { title: 'Апельсин', text: 'Соковитий апельсин', tags: ['фрукти', 'оранжевий'], id: 14 },

  { title: 'Груша', text: 'Солодка груша', tags: ['фрукти', 'зелений'], id: 15 },

  { title: 'Виноград', text: 'Солодкий виноград', tags: ['фрукти', 'фіолетовий'], id: 16 },

  { title: 'Лимон', text: 'Кислий лимон', tags: ['фрукти', 'жовтий'], id: 17 },

  { title: 'Ківі', text: 'Ніжний ківі', tags: ['фрукти', 'коричневий'], id: 18 },

  { title: 'Ананас', text: 'Солодкий ананас', tags: ['фрукти', 'жовтий'], id: 19 },

  { title: 'Полуниця', text: 'Ароматна полуниця', tags: ['фрукти', 'червоний'], id: 20 },

  { title: 'Манго', text: 'Екзотичне манго', tags: ['фрукти', 'зелений'], id: 21 },

  { title: 'Шоколад', text: 'Солодкий шоколад', tags: ['солодощі', 'коричневий'], id: 22 },

  { title: 'Зефір', text: 'Повітряний зефір', tags: ['солодощі', 'білий'], id: 23 },

  { title: 'Торт', text: 'Солодкий торт', tags: ['солодощі', 'білий'], id: 24 },

  { title: 'Льодяник', text: 'Солодкий льодяник', tags: ['солодощі', 'червоний'], id: 25 },

  { title: 'Печиво', text: 'Хрустке печиво', tags: ['солодощі', 'золотистий'], id: 26 },

  { title: 'Маршмеллоу', text: 'Ніжний маршмеллоу', tags: ['солодощі', 'рожевий'], id: 27 },

  { title: 'Вафлі', text: 'Хрусткі вафлі', tags: ['солодощі', 'бежевий'], id: 28 },

  { title: 'Карамель', text: 'Солодка карамель', tags: ['солодощі', 'бурштиновий'], id: 29 },

  { title: 'Пастила', text: 'Солодка пастила', tags: ['солодощі', 'білий'], id: 30 },

  { title: 'Пряник', text: 'Ароматний пряник', tags: ['солодощі', 'коричневий'], id: 31 },

  { title: 'Креветки', text: 'Соковиті креветки', tags: ['морепродукти', 'рожевий'], id: 32 },

  { title: 'Мідії', text: 'Соковиті мідії', tags: ['морепродукти', 'чорний'], id: 33 },

  { title: 'Кальмари', text: 'Соковиті кальмари', tags: ['морепродукти', 'білий'], id: 34 },

  { title: 'Омар', text: 'Соковитий омар', tags: ['морепродукти', 'червоний'], id: 35 },

  { title: 'Гребінці', text: 'Соковиті гребінці', tags: ['морепродукти', 'білий'], id: 36 },

  { title: 'Краб', text: 'Соковитий краб', tags: ['морепродукти', 'червоний'], id: 37 },

  { title: 'Лосось', text: 'Ніжний лосось', tags: ['морепродукти', 'помаранчевий'], id: 38 },

  { title: 'Тунець', text: 'Ніжний тунець', tags: ['морепродукти', 'рожевий'], id: 39 },

  { title: 'Скумбрія', text: 'Соковита скумбрія', tags: ['морепродукти', 'сріблястий'], id: 40 },

  { title: 'Оселедець', text: 'Солоний оселедець', tags: ['морепродукти', 'сірий'], id: 41 }

]);

Є така структура даних для списку з фільтрів:

filtersMenu: ['овочі', 'фрукти', 'солодощі', 'морепродукти'],

Потрібно зробити приклад кода з оригінальним v-combobox з vuetify 3 бібліотеки з такою функціональністю:

1) шукати по ключам по всім трьом властивостям (filter-keys="title, text, tags");

2) у випадаючому списку об'єктів відображати пропсу text;

3) у випадаючому списку об'єктів має працювати підсвітка (підсвічувати співпадіння у text);

4) при виборі об'єкта, у input поле додавати пропсу title;

5) при виборі айтема з filtersMenu, додавати його у input та оновлювати меню з підгодящими об'єктами;

Звернути увагу:

- реалізувати потрібно стандартними можливостями v-combobox (без комбінацій з різних компонентів);

- пошукова функція має шукати по всім трьом пропсам (title, text, tags) вне залежності від регістра;

- підсвітка має працювати

- випадаючий список має активізовуватись коли додано айтем з filtersMenu (попереднє value можна замінювати)