<p dir="auto">If We have a markup <code class="notranslate">[v-if] &gt; content</code> and the content is dynamic, as long as the content changes and make the <code class="notranslate">[v-if]</code> hides-&gt;shows,  the content in <code class="notranslate">[v-if]</code> will back to the previous <a href="http://jsfiddle.net/TerenceZ/h74zrmqz/1/" rel="nofollow">[demo]</a>. To find the actual problem, I check the source of vuejs and find that the <code class="notranslate">[v-if]</code> only snapshots the content when binding, and I also find that the implements for <code class="notranslate">instance/compile</code> (snapshot for <code class="notranslate">_transCpnts</code>) and <code class="notranslate">compile</code> in <code class="notranslate">[v-if]</code> (snapshot for <code class="notranslate">children</code>) will occur some problems (e.g., not fire the detach event) in some situations.</p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">I have a definition list (<code class="notranslate">&lt;dl&gt;</code>) where lots of entries are link entries. Link entries have a <code class="notranslate">&lt;dt&gt;</code> with a caption and a button, then a <code class="notranslate">&lt;dd&gt;</code> with an <code class="notranslate">&lt;a&gt;</code> element. Our current code repeats a lot of common markup and attributes for those link entries. I'd like to factor them out into a component, so our definition list can have just the relevant parts, e.g.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;link-dt caption=&quot;New Issue&quot; url=&quot;https://new-issue.vuejs.org/&quot; /&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">link-dt</span> <span class="pl-c1">caption</span>="<span class="pl-s">New Issue</span>" <span class="pl-c1">url</span>="<span class="pl-s">https://new-issue.vuejs.org/</span>" /&gt;</pre></div>
<ul dir="auto">
<li>The intuitive solution would be to make a component with <code class="notranslate">&lt;dt&gt;…&lt;/dt&gt;&lt;dd&gt;…&lt;/dd&gt;</code> on the top level. (Current Vue would complain that there should be only one root element.)</li>
<li>The next best approach would be to wrap it in a <code class="notranslate">&lt;template&gt;</code>. (Current Vue would complain that the render function returned multiple elements.)</li>
</ul>
<h3 dir="auto">What does the proposed API look like?</h3>
<h4 dir="auto">app.html</h4>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!-- … boilerplate here … --&gt;
&lt;dl&gt;
  &lt;dt&gt;Project:&lt;/dt&gt;&lt;dd&gt;Vue&lt;/dd&gt;
  &lt;link-dt caption=&quot;Website:&quot;
    url=&quot;https://www.vuejs.org/&quot; /&gt;
  &lt;dt&gt;Suggested:&lt;/dt&gt;&lt;dd&gt;1970-01-01&lt;/dd&gt;
  &lt;link-dt caption=&quot;Bug tracker:&quot;
    url=&quot;https://github.com/vuejs/vue/issues/&quot; /&gt;
  &lt;link-dt caption=&quot;Feature Requests:&quot;
    url=&quot;https://new-issue.vuejs.org/?repo=vuejs/vue&amp;type=feature-request&quot; /&gt;
&lt;/dl&gt;
&lt;!-- … more stuff … --&gt;"><pre class="notranslate"><span class="pl-c">&lt;!-- … boilerplate here … --&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">dl</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">dt</span><span class="pl-kos">&gt;</span>Project:<span class="pl-kos">&lt;/</span><span class="pl-ent">dt</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">dd</span><span class="pl-kos">&gt;</span>Vue<span class="pl-kos">&lt;/</span><span class="pl-ent">dd</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">link-dt</span> <span class="pl-c1">caption</span>="<span class="pl-s">Website:</span>"
    <span class="pl-c1">url</span>="<span class="pl-s">https://www.vuejs.org/</span>" /&gt;
  <span class="pl-kos">&lt;</span><span class="pl-ent">dt</span><span class="pl-kos">&gt;</span>Suggested:<span class="pl-kos">&lt;/</span><span class="pl-ent">dt</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">dd</span><span class="pl-kos">&gt;</span>1970-01-01<span class="pl-kos">&lt;/</span><span class="pl-ent">dd</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">link-dt</span> <span class="pl-c1">caption</span>="<span class="pl-s">Bug tracker:</span>"
    <span class="pl-c1">url</span>="<span class="pl-s">https://github.com/vuejs/vue/issues/</span>" /&gt;
  <span class="pl-kos">&lt;</span><span class="pl-ent">link-dt</span> <span class="pl-c1">caption</span>="<span class="pl-s">Feature Requests:</span>"
    <span class="pl-c1">url</span>="<span class="pl-s">https://new-issue.vuejs.org/?repo=vuejs/vue&amp;type=feature-request</span>" /&gt;
<span class="pl-kos">&lt;/</span><span class="pl-ent">dl</span><span class="pl-kos">&gt;</span>
<span class="pl-c">&lt;!-- … more stuff … --&gt;</span></pre></div>
<h4 dir="auto">src/components/dt-url-caption-link/dt.js</h4>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
  template: require('./dt.html'),
  props: {
    url:        { type: String },
    caption:    { type: String },
  },
};"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">template</span>: <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./dt.html'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-c1">props</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">url</span>:        <span class="pl-kos">{</span> <span class="pl-c1">type</span>: <span class="pl-v">String</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">caption</span>:    <span class="pl-kos">{</span> <span class="pl-c1">type</span>: <span class="pl-v">String</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<h4 dir="auto">src/components/dt-url-caption-link/dt.html</h4>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;dt&gt;
  &lt;clipboard-copy-button :cliptext=&quot;url&quot; class=&quot;pull-right&quot; /&gt;
  {{ caption }}:
&lt;/dt&gt;&lt;dd&gt;
  &lt;a :href=&quot;url&quot; class=&quot;url-caption-link&quot;
    rel=&quot;noreferrer noopener nofollow&quot;
    &gt;{{ url }}&lt;/a&gt;
&lt;/dd&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">dt</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">clipboard-copy-button</span> <span class="pl-c1">:cliptext</span>="<span class="pl-s">url</span>" <span class="pl-c1">class</span>="<span class="pl-s">pull-right</span>" /&gt;
  {{ caption }}:
<span class="pl-kos">&lt;/</span><span class="pl-ent">dt</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">dd</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">:href</span>="<span class="pl-s">url</span>" <span class="pl-c1">class</span>="<span class="pl-s">url-caption-link</span>"
    <span class="pl-c1">rel</span>="<span class="pl-s">noreferrer noopener nofollow</span>"
    <span class="pl-kos">&gt;</span>{{ url }}<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">dd</span><span class="pl-kos">&gt;</span></pre></div>