Previous text field shows replaced input when typing in another field

Question

When using @input/@focus/@blur handlers on text field inputs in Buefy, I am able to replace event.target.value temporarily. In my case I'm trying to remove non-digit characters from the text field on input.

However, if the last character input in a field is a non-digit, and I then click on another field and input any character, the previous field will show that last character.

Example of Problem Towards End Of Gif

Partial Vue.js page code:

  ...

  <b-field
   class="step-field"
   :key="generateFieldKey(inNetworkSection[2].name, inNetworkSection[2].value, inNetworkSection[2].type)">
    <b-input
     class="value-input"
     size="is-medium"
     type="text"
     :value="inNetworkSection[2].value"
     @input.native="handleInput($event, 'inNetwork', inNetworkSection[2].name)"
     @focus="handleFocus($event, 'inNetwork', inNetworkSection[2].name)"
     @blur="handleFocusOut($event, 'inNetwork', inNetworkSection[2].name)"
    />
    <div
     class="toggle-container"
     v-if="inNetworkSection[2].toggle !== undefined"
    >
      <Toggle
       :checked="inNetworkSection[2].toggle"
       @change="handleToggle($event, 'inNetworkSection', 2)"
       :disabled="!inNetworkSection[2].value"
      />
    </div>
  </b-field>

  ...

  handleInput (event, section, fieldName) {
    if (section === 'inNetwork' || section === 'outOfNetwork') {
      event.target.value = event.target.value.replace(/[^0-9]/g, '')
    }

    store.dispatch('plans/accumulators/setSectionFieldValue', {
      section: `${section}Section`,
      fieldName: fieldName,
      value: event.target.value
      })
    },
    handleFocus (event, section, fieldName) {
      if (section === 'inNetwork' || section === 'outOfNetwork') {
        event.target.value = event.target.value.replace(/[^0-9]/g, '')
      }
    },
    handleFocusOut (event, section, fieldName) {
      if (section === 'inNetwork' || section === 'outOfNetwork') {
        event.target.value = event.target.value.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
      }
    },

    ...

Code goal: Add commas to thousands places in numbers when input is out of focus, and remove them when the user is typing input.

I did some console debugging in each of the methods, and in the store.dispatch getters/setters and everything prints out as either digits or digits with commas, which is what we want.

So it doesn't seem like anywhere "3000" is being saved as "3000f" for instance if the last character typed in is "f".

I've considered this being an issue of Vue/React with updates but it doesn't ever appear to store non-digit characters in the store.

It almost seems like the event is sharing the target input (value) across multiple fields, since the non-digit characters only pop up when another field successfully inputs a digit.