Why is the component not destroyed when the condition is met?

Question

Vue.js

There is a component

<section v-if="$route.name === 'index'">
   ...
</section>

Why is it not destroyed when switching to another route? How can I force it to reload when the condition is met?

Answer 1

Vue caches this for optimization. To force Vue to re-render a component, use :key on the component, with a unique value.