事件在Chrome中完美运行，但在Firefox Vue.js中却无法正常运行

Question

我已经在Vue.js中实现了一个简单的事件，当用户单击它们时会隐藏div，并在按下Enter键时再次显示它们：

<div class="room" v-show=show.room  @click='toggle = !toggle'>

          </div>

下面我有使用v-show指令显示的div：

<div v-show="toggle" :class="[{clickedButton: isSelected}]" class="desk-area" @click="selected = workSpace; draw(workSpace);isSelected = !isSelected">
           <img :class="[{clickedImage: isSelected}]" class="seat-icon" alt="desk icon" src="/svg/icons/blue-seat.svg">
           <span class="desk-text">desks area</span>
          </div>

切换布尔值保留在数据中

 data: () => ({
    toggle: true,
  }),

我有一个方法可以切换它：

toggleMethod() {
      this.toggle = true;
    },

并且我将keyup事件附加到创建的生命周期挂钩中：

created: function () {
   document.addEventListener('keyup', this.toggleMethod)
  },

当用户单击Chrome中的div时，它会隐藏，当他按Enter键时，它会显示，但是在Firefox中，它不会隐藏并显示，如何使它也适用于Firefox？