Vue组件中的另一个上下文菜单

Question

我想在Vue组件中执行另一个上下文菜单。我这样做是这样的：

<button @contextmenu.prevent="openContextMenu">Click</button>

<div v-show="activeContextMenu==='context'" class="context__menu">
      <div class="edit">
        <div class="icon">
          <img src="@/assets/icons/To_edit.png">
        </div>
        <div class="label">
          <span>Редактировать</span>
        </div>
      </div>
      <div class="delete">
        <div class="icon">
          <img src="@/assets/icons/Delete.png">
        </div>
        <div class="label">
          <span>Удалить</span>
        </div>
      </div>
    </div>

这是样式：

.context__menu {
    display: block;
    position: absolute;
    width: 70px;
    height: 44px;
    background-color: #fff;
    z-index: 1;
    border-radius: 20%;

    .edit {
      border-bottom: 1px solid #000;
    }

    .icon,
    .label {
      display: inline-block;
    }

    .icon {
      width: 22px;
      height: 22px;
      background-color: #cccccc;

      img {
        width: 20px;
        height: 20px;
      }
    }
  }

函数openContextMenu在methods中：

openContextMenu(e) {
      let contextMenu = document.getElementsByClassName('context__menu')[0];
      let style = window.getComputedStyle(contextMenu);

      style.top = e.clientY + 'px';
      style.left = e.clientX + 20 + 'px';

      this.activeContextMenu = 'context';
    }

我从Vuex商店获得activeContextMenu：

activeContextMenu: {
      get() {
        return this.$store.getters.ACTIVECONTEXTMENU;
      },
      set(activeMenu) {
        this.$store.dispatch('setActiveContextMenu', activeMenu);
      }
    }

但是上下文菜单没有出现。为什么会这样？

P.S。右键单击后，在控制台中出现错误“不允许对此文档进行修改”。