fix(b-form-checkbox/b-form-radio): chnage event timing (#6008)

Author: jacobmllr95

src/components/form-checkbox/form-checkbox.js

@@ -102,16 +102,19 @@ export const BFormCheckbox = /*#__PURE__*/ Vue.extend({
       }
       this.computedLocalChecked = localChecked
 
-      // Change is only emitted on user interaction
-      this.$emit('change', localChecked)
+      // Fire events in a `$nextTick()` to ensure the `v-model` is updated
+      this.$nextTick(() => {
+        // Change is only emitted on user interaction
+        this.$emit('change', localChecked)
 
-      // If this is a child of `<form-checkbox-group>`,
-      // we emit a change event on it as well
-      if (this.isGroup) {
-        this.bvGroup.$emit('change', localChecked)
-      }
+        // If this is a child of `<form-checkbox-group>`,
+        // we emit a change event on it as well
+        if (this.isGroup) {
+          this.bvGroup.$emit('change', localChecked)
+        }
 
-      this.$emit('update:indeterminate', indeterminate)
+        this.$emit('update:indeterminate', indeterminate)
+      })
     },
     setIndeterminate(state) {
       // Indeterminate only supported in single checkbox mode

src/components/form-radio/form-radio.js

@@ -31,11 +31,9 @@ export const BFormRadio = /*#__PURE__*/ Vue.extend({
     }
   },
   computed: {
-    // Radio Groups can only have a single value, so determining if checked is simple
     isChecked() {
       return looseEqual(this.value, this.computedLocalChecked)
     },
-    // Flags for form-radio-check mixin
     isRadio() {
       return true
     },
@@ -44,21 +42,30 @@ export const BFormRadio = /*#__PURE__*/ Vue.extend({
     }
   },
   watch: {
-    // Radio Groups can only have a single value, so our watchers are simple
-    computedLocalChecked() {
-      this.$emit('input', this.computedLocalChecked)
+    computedLocalChecked(newValue, oldValue) {
+      if (!looseEqual(newValue, oldValue)) {
+        this.$emit('input', newValue)
+      }
     }
   },
   methods: {
     handleChange({ target: { checked } }) {
-      const value = this.value
+      const { value } = this
+      const localChecked = checked ? value : null
+
       this.computedLocalChecked = value
-      // Change is only emitted on user interaction
-      this.$emit('change', checked ? value : null)
-      // If this is a child of form-radio-group, we emit a change event on it as well
-      if (this.isGroup) {
-        this.bvGroup.$emit('change', checked ? value : null)
-      }
+
+      // Fire events in a `$nextTick()` to ensure the `v-model` is updated
+      this.$nextTick(() => {
+        // Change is only emitted on user interaction
+        this.$emit('change', localChecked)
+
+        // If this is a child of `<form-radio-group>`,
+        // we emit a change event on it as well
+        if (this.isGroup) {
+          this.bvGroup.$emit('change', localChecked)
+        }
+      })
     }
   }
 })