Vue v-если не скрывать мобильный заголовок

У меня есть этот проект, где я пытаюсь добавить меню мобильного просмотра. Это меню отображается при нажатии кнопки. Кнопка, которую я создал, включает и выключает логическое значение. Но когда значение логического значения изменяется, v:if в меню не скрывает его. Он продолжает показывать.

Это мой пункт меню внутри шаблона:

<template>
  <div>
    <div> ... main menu ... </div>

    <div :v-if = "menuOpened" class = "bg-purple-primary h-10 z-20">
       <p>Hello World</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      menuOpened: false
    }
  },
  methods: {
    switchMenuState () {
      this.menuOpened = !this.menuOpened
      console.info(this.menuOpened)
    }
  }
}
</script>