最近、仕事でvueをいじったので、忘れないうちにアウトプット（笑）
取り急ぎ、アウトプットしているので、文面がひどいです。
徐々に肉付け、整形していきますので、ご容赦ください。
参考サイト
実装関連
https://jp.vuejs.org/v2/guide/instance.html
https://vuex.vuejs.org/ja/api/#vuex-store
https://element.eleme.io/#/en-US
単体テスト関連
https://vue-test-utils.vuejs.org/ja/
https://jestjs.io/docs/ja/getting-started
デバック関連
いいなーって思ったポイント
htmlとCSSとJavaScriptとデータモデルが分かれていること
レガシーな画面しか経験の無かった自分としては、データモデルが分かれているのは、非常に分かり易かったです。
しかも、データモデル自体が構造的でわかり易いです。
ライフサイクル
まだ、created と mouned しか使ってなくて、理解できていませんが、ライフサイクルがあるのは面白い。
理解出来次第、書いていきます。
１．beforeCreate
２．created
３．beforeMount
４．mounted
５．beforeDestory
６．destroyed
computed、watch、filter
各々面白い機能だな～って思っています。
まだ完全な使い分けを理解していないので、理解出来次第書いていきます。
わからんーって思って、ハマったポイント
vue と vuex と ライブラリの分けがわからんかった。
たぶん、勘のいい人は気にしないと思いますが、私はハマッてしまったので。
要するに、既に実装してある機能を参考に作ろうとすると、その実装されている「タグ」がどういう動きをするのか？がわからん！
って思って、調べるときに、どの本家のサイトを見ればよいのか？が分からなくなってしまいました。
Google先生に聞くと、情報は出ます。ただ、本家の情報が知りたいじゃないですか。
そのときに、「このタグ」って。。。
っていうのに、だいぶハマリました。
単体テストについて
vue-test-utils とはいえ、jestも知っておく必要あった。
ただ、jest は神かと思いましたｗ どんなファンクションもモック化できるので隅々までUTが実施できますね。
デバックについて
GoogleChromeのデベロッパーツールのコンソールは、神ですねｗ
javascirptを試しに実行ができます。
あと、console.log で出力した内容が表示されます。
あと、chromeの拡張機能のVue.js Devtoolsは、必須ですね。。
なんでか？というと、データモデルがvueの記載方法で確認ができるからです。
何かを操作して、値がどう変わった？って見るときに、Devtoolsが無いと、console.logでログ出力するか、HTML上で判断するしかないですが、Devtoolsだとそのまま見れます。