На vue3 написать форму фильтра c полями

Нужно написать приложение Vue3 состоящее из фильтра, на базе компонентов, который бы отдавал на бэк по axios данные фильтра. Этот фильтр на базе компонентов далее хотелось бы встроить в своё приложение, которое уже в чём-то готово.

Специалисту для простоты пусть фильтр будет размещен в виде компонента <the-filter> во App.vue. В своё приложение разместим этот фильтр сами.

Форма фильтра состоит из полей и кнопки "отправить/Найти".
Типы полей: диапазон (цена от ***, до ***), текстовое поле, выпадающий список, чекбокс, радио, файл.

Пример как должно выглядеть:
Текстовое поле: Простой компонент TheInput, который состоит из простого <input type='text'>
Диапазон: составной компонент InputRange, который состоит из двух TheInput компонентов

итп

Нужно в итоге чтобы введенные данные в фильтр, отправлялись на бэк с помощью axios

Желательно писать с Composition API, но в целом без разницы, главное чтобы код был читабельным, чистым, без сильных искажений правильных практик.

Нужно учесть что несколько экземпляров компонента фильтра может быть размещено на одной странице, один фильтр для одного блока, другой для другого в рамках одной страницы.

Пример вида фильтра на скриншоте. Фильтр оформлять как-то по css не обязательно, важен сам функционал. На проекте используется bootstrap5 поэтому возможно использовать его, с простым class='form-controll' на инпутах