Как скрывать выпадающий список при выборе какого-либо его пункта?

<template>
    <div class="sidebar">
        <button class="sidebar__button sidebar__button_info">данные о контакте</button>
        <div class="sidebar__button_status" @click="openClick()">
            {{ status}}
        </div>
        <ul class="sidebar__button_list_item">
            <li class="sidebar__button sidebar__button_list"
                v-for="item in items"
                :key="item"
                @click="changeClick(item)">
                {{item}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'sidebar',
  data () {
    return {
      items: ['в сети', 'занят', 'отсутсвую', 'в самолете', 'в пути'],
      status: 'статус'
    }
  },
  methods: {
    openClick: function () {
      this.show = !this.show
      const a = document.getElementsByClassName('sidebar__button_status')
      if (this.show) {
        a[0].classList.add('open-list')
      } else {
        a[0].classList.remove('open-list')
      }
    },
    changeClick: function (item) {
      this.status = item
    }
  }
}
</script>

Есть блок "статус", при нажатии на него появляется список: "в сети", "занят" и т.д.
Необходимо, чтобы при выборе ответа список исчезал.
Сейчас список исчезает только при клике на блок "статус".