Can't load component though URL changed - vuejs2

Question

I have this route which loads a component and makes some validations
{
path: "/sso/:id/:atex/:entityId/:ip",
name: "SSO",
component: () => import("./views/account/sso"),
meta: {
beforeResolve(to, routeFrom, next) {
if (localStorage.getItem('userDetails') || localStorage.getItem('user')) {
next({ path: "/" + to.params.entityId })
}
next();
}
},
}
In the component and if user is valid
this.$router.replace("/" + this.$route.params.entityId);
And here's the route of /
{
path: "/:entityId?",
name: "Companies",
meta: {
authRequired: true,
beforeResolve(routeTo, routeFrom, next) {
next();
},
},
component: () => import("./views/dashboards/CompaniesGrid"),
},
And in the component I search for a table cell that contains the entityId value and click it to naرigate to /dashboard
var len = document.querySelectorAll('td').length;
for (var i=0; i < len; i++){
if ( document.querySelectorAll('td')[i].innerText == (this.$route.params.entityId).toUpperCase()){
document.querySelectorAll('td')[i].setAttribute('id', this.$route.params.entityId);
document.getElementById(this.$route.params.entityId).click();
}
}
The URL changes successfully but it doesn't really navigate. The component of dashboard isn't loaded and when I click it manually I get
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/dashboard".
How to solve this issue and why did it happen?