Radio and Checkbox Elements v-model Triggers Computed Property Setter

We’re using a checkbox (or radio) form inputs and binding the v-model value to a computed property. The value is passed as prop. We also use a a setter to update that value in the store. After everything is mounted the prop gets updated (via api), which in turn updates the computed property. The problem is when the computed property getter is updated, the setter is triggered.

Here’s a simple example:

export default Vue.component("example", {
   template: `
      <div>    
         <b-form-checkbox v-model="value">Label Text</b-form-checkbox>	
      </div>
   `,
   props: ['props'],
   computed: {
      value: { 
         get: function () { return this.props.value; },
         set: function (val) {
            this.$store.dispatch('updateValueInStore', val);
         }
      }
   }
});

In this case if the props.value is updated by the parent the computed property is triggered and then the computed setter is triggered.

I also put together a simple Vue Cli environment/example to mimic the behavior here: https://github.com/ryannmedina/vue-bootstrap-test. This includes a text input, which works as expected.

[belluzj]

I have the same issue, with version 2.21.2.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!