Code Sample

Component

<template>
  <b-form>
    <input v-model="test1">
    <!--<b-form-input v-model="test1"></b-form-input>-->
  </b-form>
</template>

<script>
export default {
  name: 'test',
  state: {
    testState: '',
  },
  computed: {
    test1: {
      get() {
        console.log('test1 get');
        return this.testState;
      },
      set(value) {
        console.log('test1 set', value);
        this.testState = value;
      },
    },
    test2: {
      get() {
        console.log('test2 get');
        return this.$store.getters.test;
      },
      set(value) {
        console.log('test2 set', value);
        this.$store.commit('test', value);
      },
    },
  },
};
</script>

Store

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    testStore: '',
  },
  getters: {
    test: s => s.testStore,
  },
  mutations: {
    test(state, value) {
      state.testStore = value;
    },
  },
});

Description

Using the previous code sample, try the various combinaison of standard input vs b-form-input and test1 and test2 bindings while monitoring the store state and console using the vue debug tool browser extension. Only un-comment a single component at a time.

You will quickly notice that the standard input component does not have the same behavior as the b-form-input component. Here is a table that summaries the behavior that you should see vs the expected behavior.

Because of the difference highlighted in the previous result, the store also gets updated twice.

Note

I also noticed that the setter is triggered on blur when using b-form-input which is an other difference with the standard input component. Is this a wanted behavior? This feels a little strange since it is already called for every keystroke.

Additional Info

• Operating System: Windows 10 (1803)
• Browser: Chrome (69)
• Bootstrap-Vue version: 4.1.3