Состояние флажка не меняется

Привязка и использование Checkbox всегда были источником путаницы. Простое и базовое использование Checkbox в Vue можно реализовать следующим образом:

<input
  type = "checkbox"
  :value = "vModelCheckGeoTIFFOverlayBandAverages"
  :disabled = "isCheckboxGeoTIFFOverlayBandAveragesDisabled"
  @change = "onCheckboxGeoTIFFOverlayBandAveragesChanged"
/>

onCheckboxGeoTIFFOverlayBandAveragesChanged(e) {
  console.info('is checked', e.target.checked); // true or false
},

Флажок value связан со значением модели, и для наблюдения за изменениями мы можем прослушивать событие change и выбирать текущее проверенное состояние из $event.target.checked. Для других типов ввода текущее значение состояния доступно из $event.target.value. Хорошая реализация может быть:

<template>
  <cds-checkbox id = "idCheckboxGeoTIFFOverlayBandAveragesContainer">
    <label id = "idTextGeoTIFFOverlayBandAverages">{{ tempTextBandAverages }}</label>
    <input
      type = "checkbox"
      :value = "vModelCheckGeoTIFFOverlayBandAverages"
      :disabled = "isCheckboxGeoTIFFOverlayBandAveragesDisabled"
      @change = "onCheckboxGeoTIFFOverlayBandAveragesChanged"
    />
  </cds-checkbox>
</template>

<script>
import { GeoTIFFOverlaySettingsConstants } from '../../../resources/GeoTIFFOverlaySettings/GeoTIFFOverlaySettingsConstants.js';

let msg = null;

export default {
  name: 'SentinelHubGeoTIFFOverlayBand1',
  data() {
    return {
      tempTextBandAverages: GeoTIFFOverlaySettingsConstants.CONST_STRING_BAND_1_AVERAGES.description,
    };
  },
  components: {},
  props: {
    // isCheckboxGeoTIFFOverlayBandAveragesChecked: {
    //   type: Boolean,
    //   default: false,
    // },
    isCheckboxGeoTIFFOverlayBandAveragesDisabled: {
      type: Boolean,
      default: false,
    },
    vModelCheckGeoTIFFOverlayBandAverages: {
      type: Boolean,
      default: null,
    },
  },
  emits: {
    'update:vModelCheckGeoTIFFOverlayBandAverages': null,
  },
  computed: {
    // compPropsVModelCheckGeoTIFFOverlayBandAverages: {
    //   get() {
    //     return this.vModelCheckGeoTIFFOverlayBandAverages;
    //   },
    //   set(value) {
    //     this.$emit('update:vModelCheckGeoTIFFOverlayBandAverages', value);
    //   },
    // },
  },
  methods: {
    onCheckboxGeoTIFFOverlayBandAveragesChanged(e) {
      const val = e.target.checked;
      console.info('is checked', val);
      this.$emit('update:vModelCheckGeoTIFFOverlayBandAverages', val);

      msg = JSON.stringify({
        msg: verboseTag + '@watch.',
        isChecked: this.vModelCheckGeoTIFFOverlayBandAverages,
        // isChecked: this.isCheckboxGeoTIFFOverlayBandAveragesChecked,
      });
      console.info(msg);
    },
  },
};
</script>

Опора isCheckboxGeoTIFFOverlayBandAveragesChecked не имеет смысла и не имеет уникального и определенного использования.

Вычисляемое свойство compPropsVModelCheckGeoTIFFOverlayBandAverages больше не требуется.

Переменную msg можно реализовать как вычисляемое свойство.

И родительский элемент будет обновлен таким образом:

<SentinelHubGeoTIFFOverlayBand1 v-model:vModelCheckGeoTIFFOverlayBandAverages = "checkBoxState"/>

Лучшая и более идиоматическая реализация могла бы выглядеть так (версия Vue ^ 3.4):

<template>
  <cds-checkbox id = "idCheckboxGeoTIFFOverlayBandAveragesContainer">
    <label id = "idTextGeoTIFFOverlayBandAverages">{{ tempTextBandAverages }}</label>
    <input
      type = "checkbox"
      :disabled = "isCheckboxGeoTIFFOverlayBandAveragesDisabled"
      v-model = "model"
    />
  </cds-checkbox>
</template>

<script setup>
import { GeoTIFFOverlaySettingsConstants } from '../../../resources/GeoTIFFOverlaySettings/GeoTIFFOverlaySettingsConstants.js';

import { computed, ref } from 'vue';

const model = defineModel('vModelCheckGeoTIFFOverlayBandAverages', { default: null });

defineProps({
  isCheckboxGeoTIFFOverlayBandAveragesDisabled: {
    type: Boolean,
    default: false,
  },
});

const tempTextBandAverages = GeoTIFFOverlaySettingsConstants.CONST_STRING_BAND_1_AVERAGES.description;
// const tempTextBandAverages = ref(GeoTIFFOverlaySettingsConstants.CONST_STRING_BAND_1_AVERAGES.description);

const msg = computed(() => JSON.stringify({
  msg: verboseTag + '@watch.',
  isChecked: this.vModelCheckGeoTIFFOverlayBandAverages,
}));

</script>

ОКОНЧАТЕЛЬНО В качестве предложения, пожалуйста, используйте общие названия для вашего реквизита. Скажем, чтобы передать статус отключенного, лучше использовать обычное имя disabled вместо isCheckboxGeoTIFFOverlayBandAveragesDisabled. Вместо vModelCheckGeoTIFFOverlayBandAverages используйте modelValue — стандартное имя основной модели во Vue 3.