Vuejs js用于多个页面，而不是单个页面应用程序

我需要使用laravel 5.3和vuejs 2构建应用程序，因为我需要使用双向绑定而不是使用jquery。

我需要使用刀片模板设置视图。然后，我需要在每个页面中使用vuejs，如下所述。

资源/asserts/js/components/List.vue

<script>
    const panel = new Vue({
        el: '#list-panel',
        name: 'list',
        data: {               
           message: 'Test message'
        },
        methods: {
            setMessage: function(){
                this.message = 'New message';
            }
        }
   })
</script>

资源/asserts/views/post/index.blade.php

<div id="panel" class="panel panel-default">
    <div class="panel-heading">Posts</div>

    <div class="panel-body">
       <p>{{ message }}</p>
       <button v-on:click="setMessage">SET</button>
    </div>
</div>

在Add.vue中有Add.vue到create.blade.php等。 el: '#add-panel'

这是我的app.js。我已经注释了默认代码，如下所示。

Vue.component('list', require('./components/List.vue'));
Vue.component('add', require('./components/Add.vue'));

// const app = new Vue({
//     el: '#app'
// });

我几乎不检查大多数文档和教程。但是他们使用单个js文件。他们使用带有模板的小元素组件，而不仅仅是js。

是否可以通过这种方式使用vuejs？我需要使用app.js吗？做这个的最好方式是什么？