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

現在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を変更する必要があり面倒。

###各ソース

javascript
1// webpack.mix.js
2// ...
3
4mix.js('resources/assets/js/app.js', 'public/js')
5   .extract(['vue', 'axios', 'lodash', 'jquery', 'laravel-echo', 'pusher-js'])
6   //個別js
7   .js('resources/assets/js/c-post.js', 'public/js')
8   .js('resources/assets/js/c-user.js', 'public/js');
9
10// ...

javascript
1// app.js(抜粋)
2require('./bootstrap');
3
4const app = new Vue({
5    el: '#app',
6    data: {
7        //基底Bladeテンプレートで使用するデータ
8        information: {
9            message: ''
10        }
11    }
12});
13