<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">This solve the issue where multiple root components is not allowed like for instance</p>
<p dir="auto">i'm trying to do this with slots using my own component for page loading and checking if its on loading and not loading state and checking if its valid to render the main component</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template lang=&quot;pug&quot;&gt;
  v-progress-linear.ma-0(v-if=&quot;loading&quot; color=&quot;secondary&quot;)
  div(v-else-if=&quot;loaded&quot;)
    slot
  v-container(fluid fill-height v-else)
    v-layout(justify-center align-center)
      slot(name=&quot;no-result&quot;)
        h1.text-xs-center No Result
&lt;/template&gt;

&lt;script&gt;
export default {
  name: &quot;Page&quot;,
  props: {
    loading: {
      type: Number,
      default: 0
    },
    valid: {
      type: Boolean
    }
  },
  computed: {
    loaded() {
      return this.valid &amp;&amp; !this.loading;
    }
  }
};
&lt;/script&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">lang</span><span class="pl-c1">=</span><span class="pl-s">"pug"</span><span class="pl-c1">&gt;</span>
  v-progress-linear.ma-0(v-if="loading" color="secondary")
  div(v-else-if="loaded")
    slot
  v-container(fluid fill-height v-else)
    v-layout(justify-center align-center)
      slot(name="no-result")
        h1.text-xs-center No Result
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">template</span><span class="pl-c1">&gt;</span>

<span class="pl-c1">&lt;</span><span class="pl-s1">script</span><span class="pl-c1">&gt;</span>
<span class="pl-k">export</span> <span class="pl-s1">default</span> <span class="pl-kos">{</span>
  <span class="pl-c1">name</span>: <span class="pl-s">"Page"</span><span class="pl-kos">,</span>
  <span class="pl-c1">props</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">loading</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">type</span>: <span class="pl-v">Number</span><span class="pl-kos">,</span>
      <span class="pl-c1">default</span>: <span class="pl-c1">0</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-c1">valid</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">type</span>: <span class="pl-v">Boolean</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">computed</span>: <span class="pl-kos">{</span>
    <span class="pl-en">loaded</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">valid</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">loading</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-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">script</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">So in this part of the template makes another div to just prevent the multiple root issue</p>
<div class="highlight highlight-text-jade notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  div(v-else-if=&quot;loaded&quot;)
    slot"><pre class="notranslate">  div<span class="pl-c1">(</span><span class="pl-e">v-else-if</span>=<span class="pl-s">"loaded"</span><span class="pl-c1">)</span>
    slot</pre></div>
<p dir="auto">so doing it like this would help</p>
<div class="highlight highlight-text-jade notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="slot(fragment) Fall back content"><pre class="notranslate">slot<span class="pl-c1">(</span><span class="pl-e">fragment</span><span class="pl-c1">)</span> Fall back content</pre></div>
<p dir="auto">I know this thing can be done somehow on render functions</p>
<p dir="auto">but its not vueish anymore :)</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">so in slots</p>
<p dir="auto">we can do</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;slot fragment&gt;&lt;/slot&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">slot</span> <span class="pl-c1">fragment</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">slot</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">and in template syntax</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template fragment&gt; &lt;/template&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">fragment</span><span class="pl-kos">&gt;</span> <span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Got the idea here <a href="https://reactjs.org/docs/fragments.html" rel="nofollow">https://reactjs.org/docs/fragments.html</a></p>
<p dir="auto">Vue version 0.11.4</p>
<p dir="auto">encounter below error :<br>
vue.js:4467 Uncaught TypeError: Cannot read property 'update' of undefined vue.js:4467<br>
p.notify vue.js:6958<br>
Object.defineProperty.setvue.js:1489<br>
proxySetterrecordMainPage.js:49<br>
Vue.component.methods.onRecordChangevue.js:1894<br>
(anonymous function)VM58885:3<br>
(anonymous function)vue.js:4622<br>
handler vue.js:3415<br>
handler</p>
<p dir="auto">it happens only once. if click other dropdown it works as well.</p>
<p dir="auto">if jsfiddle example needed, i will extract one.</p>