Vue3中如何实现checkbox-group多选框初始化选中状态与后端数据和输入框值的同步？

<code class="vue"><template>
  <el-checkbox-group v-model="gnss.gnssData">
    <el-checkbox v-for="item in checkboxOptions" :key="item" :label="item">{{ item }}</el-checkbox>
  </el-checkbox-group>
  <div v-for="(value, key) in inputValues" :key="key">
    <label>{{ key.replace('input_', '') }}:</label>
    <input type="number" v-model="value">
  </div>
</template>

<script>
import { reactive, onMounted, computed } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const gnss = reactive({
      gnssData: [],
      input_gga: 0,
      input_rmc: 0,
      input_dop: 0,
      input_gsa: 0,
      input_gsv: 0,
      input_heading: 0,
      input_zda: 0,
      input_gst: 0,
    });

    const inputValues = computed(() => {
      return {
        input_gga: gnss.input_gga,
        input_rmc: gnss.input_rmc,
        input_dop: gnss.input_dop,
        input_gsa: gnss.input_gsa,
        input_gsv: gnss.input_gsv,
        input_heading: gnss.input_heading,
        input_zda: gnss.input_zda,
        input_gst: gnss.input_gst,
      };
    });

    const checkboxOptions = computed(() => {
      return [...new Set(gnss.gnssData.map(item => item))];
    });


    async function fetchBackendData() {
      try {
        const response = await axios.get('/api/gnss-data');
        const backendData = response.data;

        for (const [key, value] of Object.entries(backendData)) {
          const inputKey = `input_${key.split('_')[0]}`;
          gnss[inputKey] = value;

          if (value !== 0) {
            const checkboxLabel = key.toUpperCase().replace('_FREQ', '');
            gnss.gnssData.push(checkboxLabel);
          }
        }
      } catch (error) {
        console.error('Failed to fetch backend data:', error);
      }
    }

    onMounted(() => {
      fetchBackendData();
    });

    return { gnss, inputValues, checkboxOptions };
  },
};
</script></code>