Input @blur.native not reset the value properly

[Bigdragon13th]

Scenario: I need a number input that will reset its value back to min value if the value in the field is lower than min value only after it's blur.

Current Behavior: Given this snippet:

<template>
  <div>
    <TheMask
      :mask="['####']"
      v-model="count"
      @blur.native="resetCount"
    />
    <div>{{ count }}</div>
  </div>
</template>

<script>
import { TheMask } from 'vue-the-mask';

export default {
  components: {
    TheMask,
  },

  data() {
    return {
      count: 1,
      minCount: 1,
    };
  },

  methods: {
    resetCount() {
      if (this.count < this.minCount) {
        this.count = this.minCount;
      }
    },
  },
};
</script>

The count in mask input failed to update if:

• Remove the value in input
• Click somewhere outside
• The value pop back to 1 since it's the min value // This one correct
• Try remove the value again
• Click somewhere outside again
• The value is not pop back to 1 // Incorrect behavior

I tried debugging and found that lastValue in the component not updated properly when the value update via @blur from parent, this might be the cause of the issue.

[kosmeln]

I've bumped into exact same issue.

@Bigdragon13th, did you manage to fix it?

[Bigdragon13th]

@kosmeln I can't remember this anymore, it's too long ago, lol. I think I created my own input for this at that time.