Vue UI not updating with state changes, until I hover over it

I'm making a button to track changes in save state.

I basically have some classes being applied when I get either a success/failure response from the save. This works fine.

The part that doesn't work is the selective text inside my button.

   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>

When I get a failed response, my computed method updates my class and the button turns red. this.saveStatus is updated also, however my button text still says just "Save", not "Save failed".

So it's this part specifically that isn't updating initially:-

              <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>

The odd thing is, when I hover over the button, it THEN picks up the changes, and sticks on "Save failed" when I hover away from it.

Update: I've realised the cause is that when I move my mouse away quickly after clicking save - the v-on:mouseleave event isn't actually catching my mouse moving away in time, so my hover variable is set to true - which keeps my 'Save' text showing.

Any idea why this is happening or how I can fix it?