Написать на VUE Звездный рейтинг (половинчатый)

Реализовать компонент на фреймворке Vue

!!! Запрещено использовать любые библиотеки, кроме прямых зависимостей фреймворка.
Сторонние иконки разрешены.

Использование тегов и стилей по прямому назначению. Стилизация по BEM. Использование препроцессоров. Стиль кода соответствует требованиям.

Универсальность компонента. Структура компонента должна быть разработана достаточно универсально и чисто. Использовать логику фреймворка. Возможность использования компонента в любом месте приложения. Документация и описание компонента: props, emit events. Примеры использования с кодом и картинками результатов.

На веб-странице должны быть:
Две независимые секции рейтинга;
Кнопки Reset соответствующие секциям для сброса рейтинга.
Чтобы при наведении на звезды они меняли цвет (в т. ч. половинчатые), слева направо, цвет пропадает, если убрать мышь с секции звезд.
После клика на звезды цвет фиксируется до момента нового клика или Reset.
Если после клика зафиксировались звезды в цвете, то при обратном проведении справа налево цвет временно пропадает, пока не убираем мышь с секции рейтинга.