404 error on page reload

Question

I have created a WordPress based web app that will rely on template pages that will host some vue.js different front-end apps. I've added this code to the theme functions file to rewrite all the requests to the index.php file that is the front-controller of each WordPress installation

// Redirect all requests to index.php so the Vue app is loaded and 404s aren't thrown
function remove_redirects() {
    add_rewrite_rule( '^/(.+)/?', 'index.php', 'top' );
}
add_action( 'init', 'remove_redirects' );

_I've noticed that if I try to reload the registration page, I will always get a 404 error so I need to go back to the home of the website and then click on the registration button I have into the page. Is there any fix I can apply? The registration page is managed by vue router with this code

import { createRouter, createWebHistory } from 'vue-router'
//
import UserLanding from '../components/UserLanding.vue'
import UserRegistration from '../components/UserRegistration.vue'

const router = createRouter({
    history: createWebHistory(window.location.pathname),
    routes: [
        {
            name: 'UserLanding',
            path: '/',
            component: UserLanding
        },
        {
            name: 'UserRegistration',
            path: '/registration',
            component: UserRegistration 
        }
    ]
})

export default router

Thank you for the support