ionic vue 3 vue-router stuck tab3 page

from login.vue click login and redirect tab1 all tabs are working. when i'm trying to click logout at tab 3 which is router.push to login. and then try it to click login which is should redirect to /tabs/tab1 but the display is tab 3 and click some tabs are still stuck in tab3 display.

sorry for my english grammar i hope you help me thanks and god bless

Login.vue

<template>
  <ion-page>
   <ion-content>
    <p>This will go to tabs</p>
    <ion-button @click="() => router.replace('/tabs/')">Start</ion-button>
   </ion-content>
  </ion-page>
</template>

<script>
import { IonButton, IonPage, IonContent } from '@ionic/vue';
import { useRouter } from 'vue-router';
import { defineComponent } from 'vue';

export default defineComponent({
 name: "login",
 components: {
  IonButton,
  IonPage,
  IonContent
 },
 setup() {
   const router = useRouter();

  return {
   router: useRouter()
  }
 }
})
</script>

<style>

</style>

Tab1

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Tab 1</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Tab 1</ion-title>
        </ion-toolbar>
      </ion-header>
      <ExploreContainer name="Tab 1 page" />
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';
import { useRouter } from 'vue-router';
import { defineComponent } from 'vue';

const title = "Tab1";

const debugCall: any = {
    ionViewDidEnter: () => {
      console.log(`${title} ionViewDidEnter`)
    },
    ionViewDidLeave: () => {
      console.log(`${title} ionViewDidLeave`)
    },
    ionViewWillEnter: () => {
      console.log(`${title} ionViewWillEnter`)
    },
    ionViewWillLeave: () => {
       console.log(`${title} ionViewWillLeave`)
    }
}

export default defineComponent({
  name: 'Tab1',
  components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
  methods: debugCall,
  setup() {
   const router = useRouter();

   return {
    router
   }
  }
})
</script>

Tab2

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Tab 2</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Tab 2</ion-title>
        </ion-toolbar>
      </ion-header>
      <ExploreContainer name="Tab 2 page" />
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';
import { useRouter } from 'vue-router';
import { defineComponent } from 'vue';

const title = "Tab2";

const debugCall: any = {
    ionViewDidEnter: () => {
      console.log(`${title} ionViewDidEnter`)
    },
    ionViewDidLeave: () => {
      console.log(`${title} ionViewDidLeave`)
    },
    ionViewWillEnter: () => {
      console.log(`${title} ionViewWillEnter`)
    },
    ionViewWillLeave: () => {
       console.log(`${title} ionViewWillLeave`)
    }
}

export default defineComponent({
  name: 'Tab2',
  components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
  methods: debugCall,
  setup() {
   const router = useRouter();

   return {
   router
   }
  }
})
</script>

Tab3

<template>
<ion-page>
 <ion-header>
  <ion-toolbar>
   <ion-title>Tab 3</ion-title>
  </ion-toolbar>
 </ion-header>
 <ion-content :fullscreen="true">
  <ion-header collapse="condense">
   <ion-toolbar>
    <ion-title size="large">Tab 3</ion-title>
   </ion-toolbar>
  </ion-header>
    <ion-button @click="() => router.replace('/login')">Logout</ion-button>
  <ExploreContainer name="Tab 3 page" />
 </ion-content>
</ion-page>
</template>

<script lang="ts">

const title = "Tab3";

const debugCall: any = {
    ionViewDidEnter: () => {
      console.log(`${title} ionViewDidEnter`)
    },
    ionViewDidLeave: () => {
      console.log(`${title} ionViewDidLeave`)
    },
    ionViewWillEnter: () => {
      console.log(`${title} ionViewWillEnter`)
    },
    ionViewWillLeave: () => {
       console.log(`${title} ionViewWillLeave`)
    }
}

import {
 IonPage,
 IonHeader,
 IonToolbar,
 IonTitle,
 IonContent,
 IonButton
} from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';
import { useRouter } from 'vue-router';
import { defineComponent } from 'vue';

export default defineComponent({
 name: 'Tab3',
 components: {
  ExploreContainer,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonPage,
  IonButton
 },
 methods: debugCall,
 setup() {
  const router = useRouter();

  return {
   router
  }
 }
})
</script>