can somebody suggest to me what is going wrong with my application here? I have a vue 3 SPA. I'm hosting it here for like

example.com/subdirectory/myapp/

It redirects to example.com after loading the app from the same path

example.com - redirected here with routes e.g example.com/create or example.com/delete

What I want to achieve is loading all routes from the subdirectory path like

example.com/subdirectory/myapp/create
example.com/subdirectory/myapp/delete

etc.

My vue.config.js code is as below:

module.exports = {
    publicPath: './',
};

My Routes code is as below:

import { createWebHistory, createRouter} from 'vue-router'

const routes = [
    {path: '/', name: 'list', component: () => import('@/views/List')},
    {path: '/create', name: 'create', component: () => import('@/views/Create')},
    {path: '/delete', name: 'delete', component: () => import('@/views/Delete')},
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

Please guide me what is something wrong I'm doing here? I'm guessing it's something with my routing config for apache serving but what is that? I'm not able to figure it out.