Vue Router Hard Realod Problem (404 Not Found) - vue.js

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:
Vue Router return 404 when revisit to the url
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?