Выпадающее меню vue.js

Нужна помощь в реализации выпадающего меню в vue.js. Выглядеть должно примерно так :

Вот мои наработки

<template>
  <div class="header">
    <div class="side">
      <router-link to="/data-secrets"><img alt="Vue logo" src="../assets/logo.svg"></router-link>
    </div>
    <div class="side">
      <input type="text" name="">
      <img alt="bell" src="../assets/bell.png">
      <div v-on:click='showDropdown'>
        <img alt="user" src="../assets/user.png">
        <span>Joe S</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HeaderComponent',
  data: {
    isShowDropdown:false,
  },
  methods: {
    showDropdown() {
            console.log(this.isShowDropdown);
        this.isShowDropdown=true
            console.log(this.isShowDropdown);
      },
    },
}
</script>
<style scoped lang="less">
.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  border-bottom: 1px solid black;
  .side{
    display: flex;
    align-items: center;
  }
}
</style>

Это отдельный компонент header. По-идее нужно на том дропдауне вставить тег v-if='isShowDropdown', но у меня это не собирается.