Getting error "Failed to mount component: template or render function not defined." while using js file as Vue component
<p>I'm using Vue in Laravel 5.3. I have already worked with Laravel 5.2. But Laravel 5.3 and Vue.js is new for me. So I'm playing with these pair. I have completed <a href="https://laravel.com/docs/5.3/passport" rel="nofollow noreferrer">Laravel Passport</a> tutorial successfully. Now what I want to do is put my html template in blade file and js code in Vue component. But I'm getting this error:</p>

<blockquote>
  <p>[Vue warn]: Failed to mount component: template or render function not defined. (found in component )</p>
</blockquote>

<p>So I can't understand reason of this error as I'm new in Vue.js. If any one knows answer, it will be appreciated. Here is my code.</p>

<p><strong>Blade file</strong></p>

<pre><code>&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;tasks&gt;&lt;/tasks&gt;
    &lt;/div&gt;
    &lt;template id="tasks-template"&gt;
        &lt;ul class="list-group"&gt;
            &lt;li class="list-group-item" v-for="task in list"&gt;
                @{{task.body}}
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/template&gt;
    &lt;script src="/js/app.js"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>

<p><strong>/resources/assets/js/app.js</strong></p>

<pre><code>require('./bootstrap');
Vue.component('tasks', require('./components/Tasks'));
const app = new Vue({
    el: '#app'
});
</code></pre>

<p><strong>/resources/assets/js/components/Tasks.js</strong></p>

<pre><code>export default {
    template: '#tasks-template',
    data: function () {
        return {
            list: ''
        };
    },
    created: function() {
        this.$http.get('/api/tasks').then((response) =&gt; {
            this.list = response.body;
        }, (response) =&gt; {
            alert(0);
        });
    }
}
</code></pre>

<p><strong>UPDATE</strong></p>

<p><strong>Blade file</strong></p>

<pre><code>&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;tasks&gt;&lt;/tasks&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p><strong>/resources/assets/js/components/Tasks.js</strong></p>

<pre><code>template: require('../components/tasks-template.html'),
</code></pre>

<p>instead of</p>

<pre><code>template: '#tasks-template'
</code></pre>

<p><strong>/resources/assets/js/components/tasks-template.html</strong></p>

<pre><code>&lt;ul class="list-group"&gt;
    &lt;li class="list-group-item" v-for="task in list"&gt;
        {{task.body}}
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>But now getting this error.</p>

<blockquote>
  <p>Uncaught Error: Module parse failed: /var/www/html/casesync/resources/assets/js/components/tasks-template.html Unexpected token (1:0) 
  You may need an appropriate loader to handle this file type.
  | 
  |     
  |         @{{task.body}}</p>
</blockquote>