Porque v-show funciona alternando la propiedad CSS display, y los elementos <template> no se renderizan en el DOM. No existe un elemento real al que aplicar display: none.
vue
<!-- v-show en <template> no hace nada en silencio -->
<template v-show="isVisible">
<h1>Title</h1>
<p>Content</p>
</template>
<!-- Estos elementos SIEMPRE serán visibles -->Otra limitación: v-show no admite v-else.
vue
<!-- v-else NO funciona con v-show -->
<div v-show="isLoggedIn">Welcome!</div>
<div v-else>Please log in</div> <!-- roto -->Cómo solucionarlo
Para alternar múltiples elementos: usa v-if en <template> (sí lo admite), o envuélvelos en un elemento real con v-show.
vue
<!-- v-if funciona en <template> -->
<template v-if="isVisible">
<h1>Title</h1>
<p>Content</p>
</template>
<!-- O envuelve en un elemento real -->
<div v-show="isVisible">
<h1>Title</h1>
<p>Content</p>
</div>Para el comportamiento "else" con v-show: usa una condición negada.
vue
<div v-show="isLoggedIn">Welcome!</div>
<div v-show="!isLoggedIn">Please log in</div>Referencia rápida
| Necesidad | Usa |
|---|---|
| Alternar múltiples elementos sin un contenedor | <template v-if> |
| Alternado frecuente, elemento único | v-show en el elemento |
| Alternado frecuente, necesitas "else" | Dos v-show con condiciones negadas |
| Ramas v-else / v-else-if | v-if / v-else |