Laravelの継承されたBladeテンプレートでのVue.jsの使用

Question

現在Laravel 5.4でVue.jsを使用したアプリを開発しているのですが、
全てのビューで使用する基底となるBladeテンプレート(base)とそこから@extendしたテンプレートと両方にVueで置換する要素があり、
Webpackによってアセットコンパイルが走る中でどのようにjsを分割すれば同じような記述のコピーを防ぎつつ上手くVue.jsで使用するdata, methodsを上手く書けるかを決め兼ねています。どういう記述/分割にするのが最もスマートかつ保守性が高いでしょうか。

###構成
Laravel 5.4 + Laravel Mix
Vue.js 2.0
jQuery
(未使用) axios, lodash

##前提

• webpack.mix.jsではmix.js().extract()によってすでにmanifest.jsとvendor.jsとapp.jsが分割されています。
• 上記3つのjsは全て基底テンプレートの最後で読み込まれています。

##暫定案

• app.jsでVueインスタンスを初期化し、ビューの要求に応じて個別に読み込むjsからVueインスタンスにリアクティブプロパティを追加する。個別jsからapp.jsのVueインスタンスを取り込む方法に難がある可能性がある。あとmethodsへの追加が不明。
• 個別のjsで毎回Vueインスタンスを初期化する。基底Bladeテンプレートで使うVue要素の記述が全ての個別jsに行き渡るので基底で変更があると全jsを変更する必要があり面倒。

###各ソース

// webpack.mix.js
// ...

mix.js('resources/assets/js/app.js', 'public/js')
   .extract(['vue', 'axios', 'lodash', 'jquery', 'laravel-echo', 'pusher-js'])
   //個別js
   .js('resources/assets/js/c-post.js', 'public/js')
   .js('resources/assets/js/c-user.js', 'public/js');

// ...

// app.js(抜粋)
require('./bootstrap');

const app = new Vue({
    el: '#app',
    data: {
        //基底Bladeテンプレートで使用するデータ
        information: {
            message: ''
        }
    }
});

Answer 1

Vueのコンポーネントで再利用とリアクティブを両立できるようなのでこちらを使用します。