title: Vue js error: Component template should contain exactly one root element
body: <p>I don't know what the error is, so far I am testing through console log to check for changes after selecting a file (for uploading).</p>
  
  <p>When I run <code>$ npm run watch</code>, i get the following error:</p>
  
  <blockquote>
    <p>"Webpack is watching the files…</p>
    
    <p>95% emitting                                                         </p>
    
    <p>ERROR  Failed to compile with 1 errors<br>
    19:42:29</p>
    
    <p>error  in ./resources/assets/js/components/File.vue</p>
    
    <p>(Emitted value instead of an instance of Error)    Vue template syntax
    error:</p>
    
    <p>Component template should contain exactly one root element. If you
    are using v-if on multiple elements, use v-else-if to chain them
    instead.</p>
    
    <p>@ ./resources/assets/js/components/AvatarUpload.vue 5:2-181  @
    ./resources/assets/js/app.js  @ multi ./resources/assets/js/app.js
    ./resources/assets/sass/app.scss"</p>
  </blockquote>
  
  <p>My File.vue is</p>
  
  <pre><code>&lt;template&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="avatar" class="control-label"&gt;Avatar&lt;/label&gt;
              &lt;input type="file" v-on:change="fileChange" id="avatar"&gt;
              &lt;div class="help-block"&gt;
                  Help block here updated 4  ...
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-6"&gt;
              &lt;input type="hidden" name="avatar_id"&gt;
              &lt;img class="avatar" title="Current avatar"&gt;
          &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default{
          methods: {
              fileChange(){
                  console.log('Test of file input change')
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Any ideas on how to solve this? What is actually the error?</p>