Vue Router Hard Realod Problem (404 Not Found)

Question

I’m fetching a problem when I refresh or hard reload the site it shows 4O4 Not Found.

Stack: Frontend - VueJs(v3), Vue-Router(v4), Tailwindcss(v3) Backend - Laravel(v8) Server: Nginx

I’ve tried more and more but not working. Link:

1. Vue Router return 404 when revisit to the url
2. https://router.vuejs.org/guide/essentials/history-mode.html#apache

First tried:

location / {
  try_files $uri $uri/ /index.html;
}

When not working then used:

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On
    RewriteCond %{HTTPS} !=on
    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [L]

    RewriteCond %{REQUEST_URI} !^/public/
    RewriteRule ^(.*)$ /public/$1 [L,QSA]

    # Disable index view
    Options -Indexes

    # Hide a specific file
    <Files .env>
        Order allow,deny
        Deny from all
    </Files>
</IfModule>

I can’t understand what should do. Anyone can help me, please?