Javascript Vue UI不会随状态更改而更新，直到我将鼠标悬停在其上

我正在制作一个按钮来跟踪保存状态的更改

基本上，当我从save获得成功/失败响应时，会应用一些类。这个很好用

不起作用的部分是我按钮内的选择性文本

   export default {
      name: "saveButton",
      components: {spinner},
      data: function() {
        return {
          hover: false
        }
      },
      props: ['handleSubmit', 'isSaving', 'saveStatus'],
      methods: {
        submit() {
          this.$emit("handleSubmit")
        },
        mouseOver(value) {
          this.hover = value;
        }
      },
      computed: {
        buttonClass() {
          if (this.saveStatus == 'success') {
            return 'save-success'
          }
          else if (this.saveStatus == 'failure') {
            return 'save-failed'
          }
          else {
            return ''
          }
        }
      }
    }
    </script>
    <template>
      <div class="settings--button-wrapper">
        <button class="btn btn--small"
                :class="buttonClass"
                type="button"
                @click="submit()"
                v-if="!isSaving"
                v-on:mouseover="mouseOver(true)"
                v-on:mouseleave="mouseOver(false)"
        >
          <span v-if="this.saveStatus == '' || this.hover">Save</span>
          <span v-if="this.saveStatus == 'failure' && !this.hover">Save failed</span>
          <span v-if="this.saveStatus == 'success' && !this.hover">Saved!</span>
        </button>
        <spinner v-if="isSaving" class="settings--spinner">
          <span>Saving...</span>
        </spinner>
      </div>
    </template>

奇怪的是，当我将鼠标悬停在按钮上时，它会拾取更改，当我将鼠标悬停在远离按钮的位置时，它会坚持“保存失败”

更新：我意识到原因是，当我在单击“保存”后快速移动鼠标时，

v-on:mouseleave

事件实际上没有及时捕捉到我的鼠标移动，因此我的

hover

变量设置为true，从而保持“保存”文本显示

---

你知道为什么会发生这种情况，或者我如何修复它吗？

所以答案是因为当我单击Save时，

正在保存
变量，并使button元素消失，所以没有注册任何
mouseleave
事件，这就是为什么它仍然认为它处于悬停状态

              <span v-if="this.saveStatus == '' || this.hover">Save</span>
              <span v-if="this.saveStatus == 'failure' && !this.hover">Save failed</span>
              <span v-if="this.saveStatus == 'success' && !this.hover">Saved!</span>