Vue ломается не в шаблоне, а в границах компонентов: проверь эти 5 мест

Vue ломается не в шаблоне, а в границах компонентов: проверь эти 5 мест

Чаще всего баги в Vue появляются не в «магии реактивности», а там, где границы размыты. Если компонент сам тянет данные, сам форматирует их и сам решает, когда рендериться — он быстро становится неудобным для тестов и переиспользования.

Проверь 5 точек:
— props: передаёшь только то, что реально нужно, без лишних объектов «на всякий случай»
— emits: события не прячутся внутри, а явно описывают поведение
— computed: используется для производных значений, а не для побочных эффектов
— watch: только для синхронизации с внешним миром, а не вместо бизнес-логики
— slots: когда компоненту важен не контент, а рамка вокруг него

Отдельный сигнал тревоги — компонент, который одновременно хранит локальное состояние, ходит в API и решает, как именно выглядит список. Такой узел трудно заменить, ещё труднее отлаживать. Лучше вынести загрузку в composable, а визуальную часть оставить «тупой».

Если компонент можно объяснить одной фразой без слова «и ещё», значит границы, скорее всего, нормальные. Если нет — режь ответственность, пока не станет ясно, кто за что отвечает.