Vue Routerで動的セグメントを設定したページをリロードすると何も表示されなくなる

前提・実現したいこと

Vue Routerでのルーティングにて、ブラウザリロードもしくはURL直打ちしても正常に表示させたいです。

発生している問題

Vue Routerで動的セグメントを設定しているページがあるのですが、
mode: 'history'にした状態でブラウザリロードもしくはURL直打ちすると何も表示されなくなります。
こちらを正常に表示させたいため質問させて頂きました。

mode: 'hash'にすると正常に動作します
router-linkから飛んだ場合は正常に表示されます
動的セグメントを設定してないページは正常に動作しております
Vue Routerのドキュメントに書いてあるApacheの設定はしており404にはなりません
開発環境でWebpack Dev Serverを使用しているのですが、こちらをhistoryApiFallbackにしても同じ現象が起きます

該当のソースコード

JavaScript
1new VueRouter({
2  mode: 'history',
3  routes: [
4    {
5      path: '/hoge', // このページは正常に動作する
6      name: 'hoge',
7      component: Hoge
8    },
9    {
10      path: '/fuga/:id', // リロードもしくはURL直打ちで何も表示されなくなる
11      name: 'fuga',
12      component: Fuga
13    }
14  ]
15});

JavaScript
1<router-link to="/fuga/id"> // このリンクからは正常に表示される

Apache
1<IfModule mod_rewrite.c>
2  RewriteEngine On
3  RewriteBase /
4  RewriteRule ^index.html$ - [L]
5  RewriteCond %{REQUEST_FILENAME} !-f
6  RewriteCond %{REQUEST_FILENAME} !-d
7  RewriteRule . /index.html [L]
8</IfModule>