Bootstrap-vue input doesn't update value inside textbox when v-model is updated

Question

I'm trying to create an input when user enters a value and if it's less than 100 then the value should automatically increased by 125.

I can make this work with simple input and vue's input event but with bootstrap-vue's input(b-form-input) sometimes it doesn't work.

Following is my code

<div id="app">
  <div>
    <b-form-input
      type="number"
      placeholder="For bootstrap-vue"
      v-model="myObj.prop1"
      @input="onProp1Change"/>
  </div>
  <div>
    <input
      type="number"
      placeholder="Simple"
      v-model="myObj.prop2"
      @input="onProp2Change"/>
  </div>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      myObj: {
        prop1: null,
        prop2: null
      }
    };
  },
  methods: {
    onProp1Change(value) {
      console.log('prop1', value);
      if (Number(value) < 1) {
        return;
      }

      if (Number(value) < 100) {
        this.myObj.prop1 = Number(value) + 125;
      }
    },
    onProp2Change(event) {
      let value = event.target.value;
      console.log('prop2', value);
      if (Number(value) < 1) {
        return;
      }

      if (Number(value) < 100) {
        this.myObj.prop2 = Number(value) + 125;
      }
    }
  }
})

jsFiddle link

In bootstrap-vue input if you start with typing 5 it changes to 130 then if you hit backspace it changes to 138 but then if you hit backspace again it changes to 13, but it should stay at 138. How to make this work?

Answer 1

It works for me with a $nextTick:

  if (Number(value) < 100) {
    this.$nextTick(() => {
        this.myObj.prop1 = Number(value) + 125;
    });
  }

The component was likely not done updating things before the new value came in. This waits until it has completed a sequence.