Чим v-if відрізняється від v-show?

• v-if - умовний рендер: якщо умова хибна, елемента немає в DOM взагалі. При зміні умови елемент (чи компонент) створюється заново або знищується разом зі своїм станом, обробниками й дочірніми компонентами.
• v-show - елемент рендериться завжди, а умова лише перемикає CSS display: none.

<Modal v-if="isOpen" />          <!-- немає в DOM, поки закрито -->
<div v-show="isExpanded">...</div> <!-- є завжди, лише прихований -->

Як обирати:

• v-show - коли елемент перемикають часто (вкладки, розгортання блоків): перемкнути CSS дешевше, ніж щоразу створювати й знищувати.
• v-if - коли умова змінюється рідко або елемент важкий і часто не потрібен узагалі: не витрачати час на початковий рендер того, що не покажуть.

Наслідки, про які питають:

• З v-if стан дочірнього компонента (введений текст, прокрутка) скидається при кожному приховуванні. З v-show - зберігається.
• v-if має v-else і v-else-if, v-show - ні. І v-show не працює на <template>.
• Не ставте v-if і v-for на один елемент: у Vue 3 v-if виконується першим і не бачить змінної циклу. Фільтр - через computed або <template v-for> з v-if усередині.

Докладніше в документації: v-if проти v-show