Css – problem with vuejs and browser refresh button

picture screen shot , i work on safari vuejs 3 and sidebar with content component content-component , But when you continuously press the refresh page button in the browser, all content appears and disappears quickly

 <div id="app">
      <div id="content"   >  
          <content-component id="content1" v-if="selectedMenuItem === 'menu1'" title="Section 1">
              <!-- Content for Section 1 -->

                 <h3>welcom to page 1</h3>
          </content-component>

          <content-component v-if="selectedMenuItem === 'menu2'" title="Section 2"  >
              <!-- Content for Section 2 -->
              <h3>welcom to page 2</h3>
          </content-component>
             <content-component v-if="selectedMenuItem === 'menu3'" title="Section 2">
     <!-- Content for Section 2 -->
     <h3>welcom to page 3</h3>
       </content-component>
             <content-component v-if="selectedMenuItem === 'menu4'" title="Section 2">
     <!-- Content for Section 2 -->
     <h3>welcom to page 4</h3>
      </content-component>
             <content-component v-if="selectedMenuItem === 'menu5'" title="Section 2">
     <!-- Content for Section 2 -->
     <h3>welcom to page 5</h3>
 </content-component>
          <!-- Add more content sections as needed -->

      </div>
     <div id="_sidebar" class="sidebar">
          <div class="sidebar--user">
          <div class="sidebar--UserBox">
          <div class="sidebar--div--close">
          <a  id="sidebar-close-toggle" class="sidebar--toggle--close">
          <svg  viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" style="width:40px; height: 40px;">
<path style="opacity: 1; vector-effect: none; fill-opacity: 1;"
d="M 517 232C 517 232 " transform="rotate(270,500,500)">
</path></svg>
          </a>
          </div>
          </div>
          <div class="sidebar--line"> </div>
          </div>
          <ul>
      <li @click="handleMenuClick('menu1')" class="wdc-btn active">
        <a>
          <span>Account</span>
                 <svg id="svg-001" role="img" xmlns="http://www.w3.org/2000/svg" width="1000mm" height="1000mm"
viewBox="0 0 1000 1000" style="max-width: 1.6rem; height: 1.6rem;">
<path  style="opacity: 1; vector-effect: none; fill-opacity: 1;"
d=" M 846 1" transform="">
               </path></svg>
        </a>
      </li>
      <li @click="handleMenuClick('menu2')" class="wdc-btn">
        <a>
          <span>Notifications</span>
              <svg id="svg-002"
role="img" xmlns="http://www.w3.org/2000/svg" width="1000mm" height="1000mm"
viewBox="0 0 1000 1000" style="max-width: 1.6rem; height: 1.6rem;">
<path  style="opacity: 1; vector-effect: none; fill-opacity: 1;"
d=" M 538 171C " transform="">
</path></svg> 
        </a>
      </li>
      <li @click="handleMenuClick('menu3')" class="wdc-btn">
   <a>
     <span>Password</span>
      <svg id="svg-003" role="img" xmlns="http://www.w3.org/2000/svg" width="1000mm" height="1000mm"
viewBox="0 0 1000 1000" style="max-width: 1.6rem; height: 1.6rem;">
<path  style="opacity: 1; vector-effect: none; fill-opacity: 1;"
d=" M 500 100C 500 " transform="">
</path></svg>
   </a>
 </li>
      <li @click="handleMenuClick('menu4')" class="wdc-btn">
   <a>
     <span>Users</span>
     <svg id="svg-004"
role="img" xmlns="http://www.w3.org/2000/svg" width="1000mm" height="1000mm"
viewBox="0 0 1000 1000" style="max-width: 1.6rem; height: 1.6rem;">
<path  style="opacity: 1; vector-effect: none; fill-opacity: 1;"
d="M 500 100C 500 100 500 100" >
</path></svg>
   </a>
 </li>
      <li @click="handleMenuClick('menu5')" class="wdc-btn">
   <a>
     <span>Address</span>
      <svg id="svg-005"
role="img" xmlns="http://www.w3.org/2000/svg" width="1000mm" height="1000mm"
viewBox="0 0 1000 1000" style="max-width: 1.6rem; height: 1.6rem;">
<path  style="opacity: 1; vector-effect: none; fill-opacity: 1;"
d=" M 456 25C 456 25 540 " transform="">
</path></svg>
   </a>
 </li>
       </ul>
      </div>
      </div>
       <script>
           const app = Vue.createApp({
               data() {
                   return {
                       selectedMenuItem: 'menu1'
                   };
               },
               methods: {
                   handleMenuClick(menuItem) {
                       this.selectedMenuItem = menuItem;
                       // Add any additional logic related to menu clicks
                   },
               }
           });
           app.component('content-component', {
               props: ['title'],
               template: `
            <div>
                <h2>{{ title }}</h2>
                <slot></slot>
            </div>
        `
           });
           app.mount('#app');
           document.addEventListener("DOMContentLoaded", function () {
               // active button  remove after select 
               const links = document.querySelectorAll(".wdc-btn ");
               links.forEach(btn => btn.addEventListener("click", (e) => {
                   e.preventDefault();
                   document.querySelector(".wdc-btn.active").classList.remove("active");
                   btn.classList.add("active")
               }));
               document.getElementById("sidebar-close-toggle").addEventListener("click", function () {
                   document.getElementById("_sidebar").classList.remove("sidebar-active");
                   document.getElementById("toggleIconPath").setAttribute("d", "M 825");
               });

           });
       </script>

I want to prevent all content from appearing when I press the refresh page button , I want to know why all the content appears when you continuously press the refresh page button .

please help me to solve it ,