SPA用の.htaccessの設定について

Question

前提

Vue.jsにて開発をしております。
Vue-cliに乗っりルーティング、サーバーはApacheとなっており、.htaccessを利用して、リロード時にも404とはならないよう設定を施したいです。

# package.json、すべては記載しておりません

dependencies
   "vue": "^2.6.10",
   "vue-router": "^3.0.3",
   "vuex": "^3.0.1",

devDependencies
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-plugin-unit-mocha": "^3.8.0",
    "@vue/cli-service": "^3.8.0",

以下のようなディレクトリ構成となっています

root/
　├ dist/
　│　├ hoge/
　│　│　　└ index.html
　│　├ fuga/
　│　│　　└ index.html
　│　├ foo/
　│　│　　└ index.html
　├ src/    # vueのリソース
　├ public/ # vueのテンプレートファイル
　├ node_modules/
...
　└ vue.config.js

たとえば現在のドメインが https://sample.vue.co.jp 、パスが hoge の場合、https://sample.vue.co.jp/hoge にてリロードすると、404とならないこと。
パスが fuga の場合、https://sample.vue.co.jp/fuga にてリロードしても、404とならないこと。
パスが fuga/fuga01 の場合、https://sample.vue.co.jp/fuga/01 にてリロードしても、404とならないこと。

該当のソースコード

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(hoge.*)$ dist/hoge[QSA,L]

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(fuga.*) dist/fuga/index.html [QSA,L]

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(foo.*)$ dist/foo/index.html [QSA,L]
</IfModule>

試したこと

    RewriteRule ^(.*) dist/fuga/index.html [QSA,L]

のようにすれば、リロードが行われても、問題なくうごきますが、すると foo では想定外（fuga）のページに遷移されてしまうため、それは行いたくない。

いろいろ試したのですが、解決策が見つからないためご教示願います。