How can i save the state of opened tab while refreshing? I have two tabs If I opened 2nd tab and than i refresh, it took me back to 1st tab. My code is

<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>

I want my browser to remember that which tab was opened before refreshing the page.Suppose I have 3 tabs on 1 page and I opened the 2nd or 3rd tab, than I refresh the page it kick me back to 1st tab. How to prevent this.Is their any solution ?