Vue3 with IONIC using Tabs configuration , not unredering current view when router navigates to other url

Question

Good day developers. Im building this Ionic-Vue3, Vuex, app using the tabs structure, and aside the current tabs url´s I also have created new paths outside'em. For some reason , navigation between URLs is ok and views that are left get properly destroyed when new URl is pushed on router, showing the current view and so on. But when i try to navigate to one url that is not included inside the tabs, the URL changes, but the view is not rendered in part. Is like if the current view stays overlaying the new pushed one. To solve this situation for the moment i have used window.location.replace('url'), but guess is not the right approach having vue a router. My package.json is like:

{
  "name": "my_project",
  "version": "0.0.1",
  "private": true,
  "description": "An Ionic project",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@capacitor/app": "5.0.5",
    "@capacitor/core": "5.1.1",
    "@capacitor/haptics": "5.0.5",
    "@capacitor/keyboard": "5.0.5",
    "@capacitor/status-bar": "5.0.5",
    "@ionic/vue": "^7.1.2",
    "@ionic/vue-router": "^7.1.2",
    "axios": "^1.4.0",
    "core-js": "^3.31.1",
    "crypto-browserify": "^3.12.0",
    "ionicons": "^7.1.2",
    "os-browserify": "^0.3.0",
    "path-browserify": "^1.0.1",
    "process": "^0.11.10",
    "rxjs": "^7.8.1",
    "socket.io-client": "^4.7.1",
    "stream-browserify": "^3.0.0",
    "swiper": "^10.0.4",
    "util": "^0.12.5",
    "vue": "^3.3.4",
    "vue-router": "^4.2.4",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@capacitor/cli": "^5.1.1",
    "@types/jest": "^29.5.2",
    "@types/jsonwebtoken": "^9.0.2",
    "@typescript-eslint/eslint-plugin": "^5.61.0",
    "@typescript-eslint/parser": "^5.61.0",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-e2e-cypress": "~5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.8",
    "@vue/cli-plugin-router": "~5.0.8",
    "@vue/cli-plugin-typescript": "^5.0.8",
    "@vue/cli-plugin-unit-jest": "~5.0.8",
    "@vue/cli-plugin-vuex": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/test-utils": "^2.4.0",
    "@vue/vue3-jest": "^29.2.4",
    "babel-jest": "^29.6.1",
    "cypress": "^12.17.0",
    "eslint": "^8.44.0",
    "eslint-plugin-vue": "^9.15.1",
    "jest": "^29.6.1",
    "ts-jest": "^29.1.1",
    "typescript": "^5.1.6",
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4"
  }
}

and in my router i have configured the paths:

import { createRouter, createWebHistory } from "@ionic/vue-router";
import { RouteRecordRaw } from "vue-router";
import TabsPage from "../views/TabsPage.vue";
import store from "@/store";
import route from "@/router";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/login-user",
    component: () => import("@/views/LoginPage.vue"),
  },
  {
    path: "/signup-user",
    component: () => import("@/views/SignUpPage.vue"),
  },
  {
    path: "/route/:friendId",
    name: "friend",
    component: () => import("@/views/Friend.vue"),
  },

  {
    path: "/tabs/",
    component: TabsPage,
    children: [
      {
        path: "",
        redirect: "/tabs/tab-all-users",
      },

      {
        path: "tab-all-users",
        component: () => import("@/views/AllUsersPage.vue"),
        beforeEnter(to: any, from: any, next: () => void) {
          store.getters.getter_user_signed ? next() : null;
        },
      },
      {
        path: "tab-user-details",
        component: () => import("@/views/UserDetailsPage.vue"),
      },
      {
        path: "tab-config",
        component: () => import("@/views/ConfigPage.vue"),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

Trying to access the path path: "/route/:friendId" from one of the tabs using router push the situation happens:

<template
  :is="renderView ? 'all-users-component' : ''"
>
  <div class="all-users-components">
    <div class="container">
      <ion-list v-if="getUserSigned.friends">
        <ion-item
          button
          v-for="(friend, index) in getUserSigned.friends"
          :key="index"
          @click="goToFriend(friend.friendId)"
        >
          <div
            slot="start"
            class="container"
            style="display: flex; flex-direction: column"
          >
            <ion-avatar slot="start">
              <img :src="friend.friendImage" alt="´friend" />
            </ion-avatar>
            <ion-text>
              <h6>{{ friend.friendName }}</h6>
            </ion-text>
          </div>

          <ion-text>
            <h6>Some text too be written</h6>
          </ion-text>
        </ion-item>
      </ion-list>

      
    </div>
  </div>
</template>
<script lang="ts">
import { mapActions, mapGetters } from "vuex";
import { defineComponent, watch } from "vue";
import {
  IonHeader,
  IonSearchbar,
  IonCol,
  IonRow,
  IonSkeletonText,
  IonList,
  IonLabel,
  IonAvatar,
  IonChip,
  IonThumbnail,
  IonItem,
  IonText,
  IonSegment,
} from "@ionic/vue";
import { add } from "ionicons/icons";
import { Swiper, SwiperSlide } from "swiper/vue";
// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import { styleSvGicons, svgIcons } from "@/styles/icons-styles";
import { AuthServices } from "@/services/auth-services/auth-services";
import { getSocketConnector } from "@/services/socket-services/socket-service";
import { GroupOfChat, User } from "@/interfaces/user-interfaces";
import { lastMessageWithFriend } from "@/utils/utils";
import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  name: "all-users-component",
  components: {
    IonHeader,
    IonList,
    IonLabel,
    IonAvatar,
    IonItem,
    IonSearchbar,
    IonCol,
    IonRow,
    IonSkeletonText,
    Swiper,
    SwiperSlide,
    IonChip,
    IonThumbnail,
    IonText,
    IonSegment,
  },
  data() {
    return {
      renderView: true as boolean,
    };
  },
  setup() {
    const router = useRouter();
    const route = useRoute();

    return {
      add,
      router,
      route,
    };
  },

  methods: {
    ...mapActions(["socketListenerAction", "goToChatWithUserView"]),

    goToFriend(friendId: string): void {
      this.renderView = false;
      this.$router.push(`/route/${friendId}`);
    },
  },

  computed: {
    ...mapGetters(["getter_user_signed"]),

    getUserSigned(): User {
      return this.getter_user_signed;
    },
  },
  
  destroyed() {
    this.renderView = false;
  },

  watch: {
    renderView(value: boolean): void {
      this.renderView = value;
      console.log("rendering ", this.renderView, value);
    },
    
  created() {   
    this.getUserSigned;
  },
});
</script>

In here the goToFriend method should trigger the router process, but despite of the URL is changed, the current view persists.

I have try to unmount the view manually with the :is directive, but neither working, also have tried to set the view routering process in the setup composition API instead of in the data, but does ot work. Any idea about how to solve the router-rendiring-view problem