Vue js error: Component template should contain exactly one root element : <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>
