NikitaKA

https://gist.github.com/dorokhin/8d47e91676a39c045...
overapi.com/javascript

document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
/* и т.д. в таком же духе */

Учите JS и переделывайте, по ссылке можете посмотреть примеры.

Возможно что то не так в конфигах webpack ?

У меня сейчас в проекте порядка 600+ vue компонентов.
Пересборка в dev с hot reload занимает 2-5 сек.
(win, ram 16gb, ssd, какой то старенький i3)

Как только ставлю перед собой задачу написать например фильтр поиска для товаров - просто туплю в экран и не могу сделать ничего

Разбивайте такие задачи на подзадачи, если подзадача "не подъемная", то разбивайте её пока не понятно будет как решать, например:
"фильтр поиска" -> видимо нужно поле ввода (например фильтр по цене), и в выводимый результат должен быть зафильтрован, скорей всего на клиенте нет всех товаров, значит фильтровать должен сервер, т.е. фильтр нужно отправить на сервер, отсюда задачи:
* добавить поле "фильтр по цене"
* взять значение из поля и добавить в запрос который улетает на сервер
* на сервере получить этот "фильтр"
* добавить этот фильтр в запрос к данным (БД)
отправка результата уже есть, поэтому там скорее всего ничего менять не надо

Если конкретная задача не разбивается, то можно её погуглить, если ничего не нашли то задать вопрос на тематическом сайте.
PS: Если ваш фрейиворк не позволяет делать простые вещи просто, то на свалку его.

Так же очень полезно написать свой фреймворк, таким образом вы будете знать как устроены большинство других фреймвлоков.