diff --git a/src/api/index.md b/src/api/index.md
index 5f3e03da7d..4a256cf17e 100644
--- a/src/api/index.md
+++ b/src/api/index.md
@@ -1563,6 +1563,7 @@ type: api
```
- **See also:** [Conditional Rendering - v-else](/guide/conditional.html#v-else)
+- **See also:** [Conditional Rendering - Component caveat](/guide/conditional.html#Component-caveat)
### v-for
diff --git a/src/guide/conditional.md b/src/guide/conditional.md
index 8ce7726fde..5eecb72f46 100644
--- a/src/guide/conditional.md
+++ b/src/guide/conditional.md
@@ -67,6 +67,25 @@ You can use the `v-else` directive to indicate an "else block" for `v-if` or `v-
The `v-else` element must immediately follow the `v-if` or `v-show` element - otherwise it will not be recognized.
+
+### Component caveat
+
+When used with components and `v-show`, `v-else` doesn't get applied properly due to directives priorities. So instead of doing this:
+
+```html
+
This could be a component too
+``` + +Replace the `v-else` with another `v-show`: + +```html +This could be a component too
+``` + +It does work as intended with `v-if`. + ## v-if vs. v-show When a `v-if` block is toggled, Vue.js will have to perform a partial compilation/teardown process, because the template content inside `v-if` can also contain data bindings or child components. `v-if` is "real" conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.