[Vuejs]-<b-form-input> bind value does not update on the second time

Hiws’s answer indicate that the this problem does not only happen on <b-form-input> but ordinary <input> with Vue as well.

This happen due to Vue not able to react to changes since the update is happening on child, hence when year to is lower than year from, parent will not detect any changes on the second time as the array pass to Parent.vue will always be [100,100].

The solution will be using watcher on Parent.vue’s array to detect the changes, hence both eg: [100, 1] -> [100,100] are both reflected on Parent.vue and most importantly, force the component to re-render.

Without force re-rendering, [100,1] or [100,2]... will always be treated as [100,100], the same value, and Vue will not react or even update to them.

Jsfiddle equivalent solution can be found here

Code sample below:

Parent.vue

<template>
  <child :year="year" @update="update">
</template>

<script>
// Import child component here

export default {
  name: 'Parent',
  components: {
    Child,
  },
  data: () => ({
    year: [100, null],
    yearKey: 0,
  }),
  watch: {
    year: {
      handler(val) {
        if (val[1] < val[0]) {
          let newYear = [...val]; 
          newYear[1] = val[0];
          this.year = newYear;
          // key update reference: https://michaelnthiessen.com/force-re-render/
          this.yearKey += 1;
        }
      }
    }
  },
  methods: {
    update(newYear) {
      this.year = newYear;
    },
  },
</script>

Child.vue

<template>
  <div>
    From <b-input :value="year[0]" />
    To <b-input :value="year[1]" @change="update" />
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    year: {
      type: Array,
      required: true,
    }
  },
  methods: {
    update(yearToVal) {
      const [yearFrom] = this.year;
      let newYear = [...this.year];
      newYear[1] = yearToVal;

      this.$emit('update', newYear);
    },
  },
};
</script>