<nav id="nav">
  <h2 class="visually-hidden">メインメニュー</h2>
  <button type="button" class="button" aria-haspopup="true" aria-controls="menu" :aria-expanded="ariaExpanded"
    @click="onclick">メニュー</button>
  <ul id="menu" class="menu" :aria-hidden="ariaHidden" v-show="flag">
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー3</a></li>
    <li><a href="#">メニュー3</a></li>
  </ul>
</nav>


  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js"></script>

.visually-hidden{
  border: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin:0;
  overflow: hidden;
  padding:0;
  position: absolute;
  white-space: nowrap
  width: 1px;
}
.button[aria-expanded="false"]::after{
  content: "を開く";
}
.button[aria-expanded="true"]::after{
  content: "を閉じる";
}

Vue.createApp({
  data() {
    return {
      flag: false,
      ariaHidden: true,
      ariaExpanded: false
    };
  },
  methods: {
    onclick() {
      this.flag = !this.flag;
      this.ariaHidden = !this.ariaHidden;
      this.ariaExpanded = !this.ariaExpanded; 
    }
  }
}).mount('#nav');