<p dir="auto">I'm having a common admin panel application with nested routes for the layouts. This way, in my application template I have  only. Also, there is a Layout component, which has another . This way, I'm trying to have this:</p>
<ul dir="auto">
<li>/login</li>
<li>/account/home</li>
<li>/account/users</li>
</ul>
<p dir="auto">It all works perfectly unless I try modify Layout.vue (which should be turned on by the /account/ part). On every hot reload it duplicates Layout.vue's template in the DOM. As many times as I change the Layout.vue.</p>
<p dir="auto">Tried playing with canReuse with no luck. Also, it appears that router mixes <br>
tags up. Instead of working with parent one it uses the one inside the Layout.vue's template.</p>
<p dir="auto">Am I doing something wrong?</p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Imagine you have this component for wrapping an input:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;input /&gt;
  &lt;/div&gt;
&lt;/template&gt;"><pre class="notranslate"><code class="notranslate">&lt;template&gt;
  &lt;div class="container"&gt;
    &lt;input /&gt;
  &lt;/div&gt;
&lt;/template&gt;
</code></pre></div>
<p dir="auto">Like in this case I have several others where I would like to make only the container enclosing tag conditionally visible, but keeping the input, so it would be:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template&gt;
    &lt;input /&gt;
&lt;/template&gt;"><pre class="notranslate"><code class="notranslate">&lt;template&gt;
    &lt;input /&gt;
&lt;/template&gt;
</code></pre></div>
<p dir="auto">... depending on certain condition.</p>
<p dir="auto">I know it's possible to achieve this using the render function, but it's too hard for me to maintain those (big in my case) components without really viewing the template as HTML itself.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">So, my suggestion is to add an argument to the v-if directive like "keep-children". This way I could do something like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template&gt;
  &lt;div v-if:keep-children=&quot;showContainer&quot; class=&quot;container&quot;&gt;
    &lt;input /&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  props: ['showContainer']
}
&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;template&gt;
  &lt;div v-if:keep-children="showContainer" class="container"&gt;
    &lt;input /&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  props: ['showContainer']
}
&lt;/script&gt;
</code></pre></div>