¿Cómo puedo guardar el estado de la pestaña abierta mientras actualizo? Tengo dos pestañas. Si abrí la segunda pestaña y actualicé, me llevó de vuelta a la primera pestaña. mi codigo es

 <template> <section> <div> <button @click="changeTab(CandiComTab1)" class="uppercase px-3 w-auto py-3 text-xs" > timeline </button> <button @click="changeTab(CandiComTab2)" class="uppercase px-3 w-auto mx-1 text-xs py-3" > community member list </button> </div> <div> <keep-alive> <component :is="currentTabComponent"></component> </keep-alive> </div> </section> </template> <script setup> import { markRaw, ref } from "@vue/reactivity"; import { useStore } from "../../store"; import CandiComTab1 from "./CandiCommunityTabs/CandiComTab1.vue"; import CandiComTab2 from "./CandiCommunityTabs/CandiComTab2.vue"; const store = useStore(); let currentTabComponent = ref(null); let changeTab = (newTab) => { currentTabComponent.value = markRaw(newTab); }; changeTab(CandiComTab1); </script>

Quiero que mi navegador recuerde qué pestaña se abrió antes de actualizar la página. Supongamos que tengo 3 pestañas en 1 página y abrí la segunda o la tercera pestaña, luego actualizo la página y me devuelve a la primera pestaña. Cómo prevenir esto. ¿Hay alguna solución?