Show AbsenceReasonGroupSelectLoader in correct chip

aleksis/apps/kolego/frontend/components/AbsenceReasonGroupSelect.vue

@@ -10,6 +10,7 @@ export default {
   data() {
     return {
       absenceReasons: [],
+      innerValue: undefined,
     };
   },
   apollo: {
@@ -52,14 +53,28 @@ export default {
       );
     },
   },
+  mounted() {
+    this.innerValue = this.value;
+  },
+  watch: {
+    value(newValue) {
+      this.innerValue = newValue;
+    },
+  },
+  methods: {
+    updateInnerValue($event) {
+      this.innerValue = $event;
+      this.$emit("input", $event);
+    },
+  },
 };
 </script>
 
 <template>
   <v-chip-group
     column
-    :value="value"
-    @change="$emit('input', $event)"
+    :value="innerValue"
+    @change="updateInnerValue"
     mandatory
     v-if="showChips"
   >
@@ -71,7 +86,7 @@ export default {
       outlined
     >
       {{ $t("kolego.absence_reason.present") }}
-      <v-avatar right v-if="loadSelectedChip && value === emptyValue">
+      <v-avatar right v-if="loadSelectedChip && innerValue === emptyValue">
         <v-progress-circular indeterminate :size="16" :width="2" />
       </v-avatar>
     </v-chip>
@@ -81,7 +96,7 @@ export default {
       :absence-reason="absenceReason"
       filter
       outlined
-      :loading="loadSelectedChip && absenceReason.id === value"
+      :loading="loadSelectedChip && absenceReason.id === innerValue"
     />
   </v-chip-group>
   <v-skeleton-loader v-else type="chip@4" class="d-flex flex-wrap gap" />