Как проверить, отображается ли v-меню или нет

Итак, у меня есть кнопка с отображаемым логотипом. Когда я навожу / нажимаю кнопку, и меню открывается, значок должен измениться на гамбургер. Часть с наведением работает нормально, но сейчас я пытаюсь сохранить значок гамбургера, отображаемый при открытом меню.

Есть ли в v-menu опция, которая проверяет состояние меню, если оно открыто, или я должен просто создать свою собственную функцию, которая возвращает логическое значение, если мое меню открыто или нет?

Ниже мой код:

<v-menu bottom offset-y attach = "#mainMenuButton">
    <template #activator = "{ on, attrs }">
      <div v-bind = "attrs" v-on = "on" id = "mainMenuButton">
        <main-menu-div>
          <template v-slot:element>
            <v-hover v-slot = "{ hover }">
              <div class = "d-flex justify-center align-center">
                <v-icon v-if = "hover" size = "14" color = "white">{{ "$hamburgerMenu" }}</v-icon>
                <v-icon v-else size = "16" color = "white">{{ "$mainLogo" }}</v-icon>
              </div>
            </v-hover>
          </template>
        </main-menu-div>
      </div>
    </template>
    <v-card class = "m-main-menu-panel d-flex flex-row">
      <div class = "column" v-for = "(column, idx) in mainMenuColumns" :key = "'main-menu-column-' + idx">
        <div v-for = "(section, index) in column" :key = "'section-' + index" class = "d-flex flex-column">
          <span class = "d-flex align-center mb-2">
            {{ $t(title) }}
          </span>
        </div>
      </div>
    </v-card>
  </v-menu>

Спасибо!