<h3 dir="auto">Version</h3>
<p dir="auto">2.5.16</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/vuo89gd4/" rel="nofollow">JSFiddle</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>Change select in "first" to "B".</li>
<li>Click the "second" tab.<br>
ER: the select in "second" will still have it's default value.<br>
AR: the select in "second" was changed to the index of the first select.</li>
</ol>
<p dir="auto">Furthermore:</p>
<ol dir="auto">
<li>Change the input in "first" to anything</li>
<li>Click the "second" tab.<br>
ER: the input in "second" should be blank.<br>
AR: the input in "second" is not black, but contains the contents of the "first" tab.</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">The select in "second" will still have it's default value.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The select in "second" was changed to the index of the first select.</p>
<hr>
<p dir="auto">If you add an ID or a class to either container div to make them non identical, it won't happen.</p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Say there's a layout component with a navbar at the top and a main content area (the primary slot <code class="notranslate">&lt;slot/&gt;</code>). This component has the prop <code class="notranslate">loading</code> which, when true, shows a loading spinner in the main content area instead of the elements. I've included a basic example below.</p>
<p dir="auto">At the moment, even when loading is true and the <code class="notranslate">v-if</code> for the <code class="notranslate">&lt;slot/&gt;</code> is false, the nodes are still being rendered. Ideally, <code class="notranslate">loading</code> here should only become false when all data has been loaded and it is safe to render the <code class="notranslate">&lt;slot/&gt;</code> elements.</p>
<p dir="auto">Yes, I'm aware that I could just <code class="notranslate">v-if="!!var"</code> everything, but this can get very tedious and shouldn't be necessary (in my opinion).</p>
<p dir="auto">I can imagine this would probably require quite a bit of stuff to be changed but I believe this is the ideal and desired functionality in this case. Sorry about the terminology, not quite sure what to call everything.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto"><em>Layout.vue</em></p>
<div class="highlight highlight-text-html-vue notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template&gt;
  &lt;div id=&quot;layout&quot;&gt;
    &lt;Navbar :nav-items=&quot;...&quot; /&gt;

    &lt;Spinner v-if=&quot;loading&quot;/&gt;
    &lt;slot v-else/&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import Vue from 'vue'

export default Vue.component('Layout', {
  props: {
    /** Whether to display the loading spinner instead of the content. */
    loading: Boolean
  }
})
&lt;/script&gt;"><pre class="notranslate">&lt;<span class="pl-ent">template</span>&gt;
  &lt;<span class="pl-ent">div</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>layout<span class="pl-pds">"</span></span>&gt;
    &lt;<span class="pl-ent">Navbar</span> :<span class="pl-e">nav-items</span>=<span class="pl-s1"><span class="pl-pds">"</span><span class="pl-k">...</span><span class="pl-pds">"</span></span> /&gt;

    &lt;<span class="pl-ent">Spinner</span> <span class="pl-e">v-if</span>=<span class="pl-s1"><span class="pl-pds">"</span>loading<span class="pl-pds">"</span></span>/&gt;
    &lt;<span class="pl-ent">slot</span> <span class="pl-e">v-else</span>/&gt;
  &lt;/<span class="pl-ent">div</span>&gt;
&lt;/<span class="pl-ent">template</span>&gt;

<span class="pl-s1">&lt;<span class="pl-ent">script</span>&gt;</span>
<span class="pl-s1"><span class="pl-k">import</span> <span class="pl-smi">Vue</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>vue<span class="pl-pds">'</span></span></span>
<span class="pl-s1"></span>
<span class="pl-s1"><span class="pl-k">export</span> <span class="pl-c1">default</span> <span class="pl-smi">Vue</span>.<span class="pl-en">component</span>(<span class="pl-s"><span class="pl-pds">'</span>Layout<span class="pl-pds">'</span></span>, {</span>
<span class="pl-s1">  props<span class="pl-k">:</span> {</span>
<span class="pl-s1">    <span class="pl-c"><span class="pl-c">/**</span> Whether to display the loading spinner instead of the content. <span class="pl-c">*/</span></span></span>
<span class="pl-s1">    loading<span class="pl-k">:</span> <span class="pl-c1">Boolean</span></span>
<span class="pl-s1">  }</span>
<span class="pl-s1">})</span>
<span class="pl-s1">&lt;/<span class="pl-ent">script</span>&gt;</span></pre></div>
<p dir="auto"><em>Implementation.vue</em></p>
<div class="highlight highlight-text-html-vue notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template&gt;
  &lt;Layout :loading=&quot;...&quot;&gt;
    &lt;p&gt;{{ rendered.once.loaded }}&lt;/p&gt;
  &lt;/Layout&gt;
&lt;/template&gt;"><pre class="notranslate">&lt;<span class="pl-ent">template</span>&gt;
  &lt;<span class="pl-ent">Layout</span> :<span class="pl-e">loading</span>=<span class="pl-s1"><span class="pl-pds">"</span><span class="pl-k">...</span><span class="pl-pds">"</span></span>&gt;
    &lt;<span class="pl-ent">p</span>&gt;{{ <span class="pl-smi">rendered</span>.<span class="pl-smi">once</span>.<span class="pl-smi">loaded</span> }}&lt;/<span class="pl-ent">p</span>&gt;
  &lt;/<span class="pl-ent">Layout</span>&gt;
&lt;/<span class="pl-ent">template</span>&gt;</pre></div>