<p dir="auto">In my code</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &lt;div id=&quot;app&quot;&gt;
    &lt;test-component type=&quot;normal&quot;&gt;&lt;/test-component&gt;
    &lt;test-component type=&quot;block&quot;&gt;&lt;/test-component&gt;
  &lt;/div&gt;

  &lt;template id=&quot;template-test-component&quot;&gt;
    &lt;li v-if=&quot;type == 'normal'&quot; class=&quot;test&quot;&gt;
      test
    &lt;/li&gt;
    &lt;div v-if=&quot;type == 'block'&quot; class=&quot;test&quot;&gt;
      &lt;p&gt;Hello, World!&lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;

  &lt;script&gt;
    var testComponent = Vue.extend({
      template: '#template-test-component',
      props: ['type']
    });

    var app = new Vue({
      el: '#app',
      components: {
        'test-component': testComponent
      }
    })
  &lt;/script&gt;"><pre class="notranslate"><code class="notranslate">  &lt;div id="app"&gt;
    &lt;test-component type="normal"&gt;&lt;/test-component&gt;
    &lt;test-component type="block"&gt;&lt;/test-component&gt;
  &lt;/div&gt;

  &lt;template id="template-test-component"&gt;
    &lt;li v-if="type == 'normal'" class="test"&gt;
      test
    &lt;/li&gt;
    &lt;div v-if="type == 'block'" class="test"&gt;
      &lt;p&gt;Hello, World!&lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;

  &lt;script&gt;
    var testComponent = Vue.extend({
      template: '#template-test-component',
      props: ['type']
    });

    var app = new Vue({
      el: '#app',
      components: {
        'test-component': testComponent
      }
    })
  &lt;/script&gt;
</code></pre></div>
<p dir="auto">This work in plunk, but on real project this code not work. v-if work only in div wrapper, example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &lt;template id=&quot;template-test-component&quot;&gt;
    &lt;div class=wrapper&gt;
      &lt;li v-if=&quot;type == 'normal'&quot; class=&quot;test&quot;&gt;
        test
      &lt;/li&gt;
      &lt;div v-if=&quot;type == 'block'&quot; class=&quot;test&quot;&gt;
        &lt;p&gt;Hello, World!&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;"><pre class="notranslate"><code class="notranslate">  &lt;template id="template-test-component"&gt;
    &lt;div class=wrapper&gt;
      &lt;li v-if="type == 'normal'" class="test"&gt;
        test
      &lt;/li&gt;
      &lt;div v-if="type == 'block'" class="test"&gt;
        &lt;p&gt;Hello, World!&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
</code></pre></div>
<p dir="auto">But .wrapper screws up my layout.</p>
<h3 dir="auto">Vue.js version</h3>
<p dir="auto">2.0.3</p>
<h3 dir="auto">Reproduction Link</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div v-if=&quot;type===1&quot;&gt;&lt;/div&gt;
&lt;div v-if=&quot;type===2&quot;&gt;&lt;/div&gt;
&lt;div v-if=&quot;type===3&quot;&gt;&lt;/div&gt;
&lt;div v-if=&quot;type===4&quot;&gt;&lt;/div&gt;
&lt;div v-if=&quot;type===5&quot;&gt;&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div v-if="type===1"&gt;&lt;/div&gt;
&lt;div v-if="type===2"&gt;&lt;/div&gt;
&lt;div v-if="type===3"&gt;&lt;/div&gt;
&lt;div v-if="type===4"&gt;&lt;/div&gt;
&lt;div v-if="type===5"&gt;&lt;/div&gt;
</code></pre></div>
<h3 dir="auto">Steps to reproduce</h3>
<h3 dir="auto">What is Expected?</h3>
<p dir="auto">No warning, because it will generate at most one element.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">Warning: Component template should contain exactly one root element</p>