title: Vue/Laravel 5.3 - component template not showing in the view
body: <p>I am trying to use a Vue component in my view for the first time. I have created a file <code>assets/js/components/ImageUpload.vue</code> that looks like this:</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;div v-if="!image"&gt;
      &lt;h2&gt;Select an image&lt;/h2&gt;
      &lt;input type="file" @change="onFileChange"&gt;
    &lt;/div&gt;
    &lt;div v-else&gt;
      &lt;img :src="image" /&gt;
      &lt;button @click="removeImage"&gt;Remove image&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data: { image: '' },
      methods: {
          onFileChange: function onFileChange(e) {
              var files = e.target.files || e.dataTransfer.files;
              if (!files.length)
                  return;
              this.createImage(files[0]);
          },
          createImage: function createImage(file) {
              var image = new Image();
              var reader = new FileReader();
              var vm = this;
              reader.onload = function (e) {
                  vm.image = e.target.result;
              };
              reader.readAsDataURL(file);
          },
          removeImage: function removeImage(e) {
              this.image = '';
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>My app.js looks like this:</p>
  
  <pre><code> require('./bootstrap');
  
   var VueResource = require('vue-resource');
  
   Vue.component('image-upload', require('./components/ImageUpload.vue'));
  
   Vue.use(VueResource);
  
   const app = new Vue({
       el: 'body'
   });
  </code></pre>
  
  <p>In my view I am inserting the component like this:</p>
  
  <pre><code>&lt;image-upload&gt;&lt;/image-upload&gt;
  </code></pre>
  
  <p>My gulpfile looks like this:</p>
  
  <pre><code>const elixir = require('laravel-elixir');
  
  require('laravel-elixir-vue-2');
  
  elixir(mix =&gt; {
    mix.copy('resources/assets/img', 'public/img');
    mix.copy('resources/assets/css', 'public/css');
    mix.copy('resources/assets/js', 'public/js');
  
      mix.sass('app.scss')
         .webpack('app.js');
  });
  </code></pre>
  
  <p>But nothing happens in the view. There is an element <code>&lt;image-upload&gt;&lt;/image-upload&gt;</code> but nothing from the template is being shown and the only error in the console is:</p>
  
  <blockquote>
    <p>[Vue warn]: Do not mount Vue to  or  -
    mount to normal elements instead.</p>
  </blockquote>
  
  <p>Since I am a not a javascript expert and a total Vue beginner I have no idea where can I change the mounting of Vue and why the template is not being displayed.</p>