Vue + Vuexの開発において、vue-cliを使って環境構築をし、単一ファイルコンポーネントで書いていたらホットリロードが効かないことがあったのでメモ。
前提として、自分の環境では、ということになりますので、必ずしもこれが解決策になるかはわかりませんが、参考までに。
下階層コンポーネントの更新が反映されない
一応コンポーネントの構成を書くと（ダミーだけど）、一般的なVue + Vuexで、以下のようなコンポーネント体系となっていました。
<Root>
<App>
<Header/>
<Main>
<Sidebar/>
<ContentsList>
<Content/>
<Content/>
<Content/>
</ContentsList>
</Main>
<Footer/>
</App>
</Root>
ここで、<Content />という部分に該当するComponent（.vue）ファイルを編集したところ、ホットリロードが効きませんでした。（その他のファイルは効いたり効かなかったり）
具体的には、propsの型定義を変更しても、「予期してるのObjectだけど、String返ってきてるよ？」みたいなエラーがリアクティブに出ず、サーバを再起動しないと反映されない、みたいな状態でした。
webpackDevMiddlewareの設定
結論としては、以下の設定ファイルを少し弄りました。
Before
build/dev-server.js
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
After
build/dev-server.js
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: false,
stats: {
colors: true,
chunks: false
},
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
})
quietはデフォルトがfalseらしいので特に明記しなくてもよさそうです。（というか、これはコンソールに出力するかどうかのオプションだからtrueでも良い。）
たぶん、今回重要なのはwatchOptionsのところだと思います。ちょっと遅らせてる感じ？なのかな。