フレームワークであるNuxt.jsをいじる前に、Vue.jsの基礎的なところを抑えておく必要があります。
Nuxt.jsの公式のドキュメントにも、Vue.jsのプログラムの書き方についてはほとんど触れておりません。
私は1ヶ月ほどかけてVue.jsの公式ドキュメントを１周しました。
公式ドキュメントだけでは不安な方は、基礎から学ぶ Vue.jsという本が巷で人気らしいので是非ご覧ください。
Vue.jsについては、飛ばし気味で通り過ぎてしまっていたので、ブログついでに要点をまとめていきましょう！
インストール
とりあえずインストールはスルーします。
公式にもあるように、まずはJSFiddle Hello World exampleで慣れるのが手っ取り早いです。
初心者がvue-cliで始めることはオススメできません。
宣言的レンダリング
HTML
<div id="app">
<p>{{ message }}</p>
</div>
JS
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
これでハローワールドアプリの完成です！
まずはJS部を分解してみます。
var app = new Vue()
ここでVueインスタンスを作成。
引数にオプションとして、オブジェクトを渡すことができます。
引数なしでnewしているソースを見たことがないのでなんとも言えませんが、サンプルのように基本オプションオブジェクトを引数に渡して使います。
オプションオブジェクト
{
el: '#app',
data: {
message: 'Hello Vue!'
}
}
elには、アプリケーションをマウントする要素を指定します。
つまり、HTMLにあるdivタグ（#app）をVueインスタンス（app）に紐付けています。
dataオブジェクトには、リアクティブシステムに登録するプロパティーを追加していきます。
dataオブジェクトに追加されたプロパティーは、その値が更新されると即時にビューに伝達し、それを更新します。
ハローワールドアプリケーションでは、
dataオブジェクトのmessageプロパティーに文字列（'Hello Vue!'）を入れ、このVueインスタンスをdivタグ（#app）にマウントしてます。
このマウントにより、指定されたDOMの配下でVueインスタンスに登録されているdataを利用することが可能です。
Mustache(マスタッシュ) 構文
即時にビューに伝達・更新を可能にするのは、データバインディングという仕組みです。
要は、ビューとデータを紐付ける仕組みです。
ここで言うビューとはdivタグ（#app）配下のpタグで、データはdataオブジェクトのmessageです。
データバインディングの形式の１つとして、Mustache(マスタッシュ)構文(2重中括弧)があります。
{{ }} ←これ
pタグの中で、{{ message }}とすることでdataオブジェクトのmessageと紐づきます。
それ故、dataオブジェクトのmessageの値'Hello Vue!'を変更すると、同時にバインディングされている{{ message }}の値も更新されるのです！