For help, a drop-down list appears when you click on each li and the css style of this one changes. How can it be achieved with vue?

<template>
  <div class="navigation">
    <div class="logo_image"></div>

    <div class="control_center"></div>
    <div class="navigation_list">
      <div
        v-on:click="click()"
        @mouseenter="enter(index)"
        @mouseleave="leave()"
        class="homePage"
      >
        

      </div>
        <div
            class="technology"
        >
            
        </div>
        <div
            class="solution"
        >
            
        </div>
      <div
        class="about"
      >
        
      </div>
      <div
        class="join"
      >
        
      </div>
    </div>

  </div>
</template>

<script>

  export default {
    data() {
      return {

      }
    },
    methods: {
      click() {
        console.log("");
        document.getElementsByClassName("show_page")[0].style.display = "block"
      },

    }
  }

</script>

subject, where is your li? does this tab show a list of child drop-down menus on the home page?

{{tab.name}}</div>

in methods

changeCss() {
    this.activeTab = index
}

then bind css
.activeTab {
color: map-get ($fontColors, FC333);
font-weight: 600;
}

Menu