How to serve VueJS history mode on shared hosting server in subdirectory

I've been digging around a solution for this but still not working. I have a VueJS app with history mode router

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

The lets say my domain is https://www.root.com and I want to serve this app on https://www.root.com/sub/ (not subdomain but subdirectory).

So here is my server directory files

--public_html
  --sub ( I place the VueJS code here)
  --index.html (html of root.com)
  --.htaccess (file to route)

After that, when I go to https://www.root.com/sub/ . It shows perfectly the Home component. However, if I enter https://www.root.com/sub/about it shows 404 Not Found, but I want it to show About component.

But the strange thing is if I make a link to navigate to About component in the Home component, then when I go to Home component first using https://www.root.com/sub/, and click at the link to go to About component. It works ! But refreshing the page or manually input the route makes it 404 not found again

Update 1: I read in Vue Router and they said to edit the Apachae .htaccess. So I change like this, but it still not working :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /sub/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

This is my vue.config.js :

module.exports = {
  publicPath: '/sub/',
  outputDir: 'dist'
}

After I'm doing this, going to About page will navigate to index.html of public_html

Update 2: I change my .htaccess to this :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /sub/
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /sub/$1 [R=301,L]
</IfModule>

Now, when i enter root.com/sub/about to see the About component , it will navigate to the Home component in root.com/sub.

Update 3: My htaccess now looks like this :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /sub/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /sub/$1 [L]
</IfModule>

And it works fine now ! However, now I have a problem with the root.com , all the css and js file always call the file in /sub instead of the root folder

Am I missing something somewhere ? Please help , P/s Im using Hostinger for the hosting platform.