Vue3中如何初始化el-checkbox-group的多选框选中状态并根据后台数据同步更新？

<code class="vue"><el-checkbox-group v-model="gnss.gnssdata">
  <el-checkbox label="gga" name="type"></el-checkbox>
  <el-checkbox label="rmc" name="type"></el-checkbox>
  <el-checkbox label="dop" name="type"></el-checkbox>
  <el-checkbox label="gsa" name="type"></el-checkbox>
  <el-checkbox label="gsv" name="type"></el-checkbox>
  <el-checkbox label="heading" name="type"></el-checkbox>
  <el-checkbox label="zda" name="type"></el-checkbox>
  <el-checkbox label="gst" name="type"></el-checkbox>
</el-checkbox-group></code>

<code class="javascript">import { reactive, onMounted } from 'vue';
import axios from 'axios';

const gnss = reactive({ gnssdata: [] });

const fetchBackendData = async () => {
  try {
    const { data: backendData } = await axios.get('/api/gnss-data');
    gnss.gnssdata = Object.entries(backendData)
      .filter(([key, value]) => value !== 0)
      .map(([key]) => key.toUpperCase().replace('_FREQ', ''));
  } catch (error) {
    console.error('Failed to fetch backend data:', error);
  }
};

onMounted(fetchBackendData);</code>

<code class="javascript">import { reactive, onMounted, ref } from 'vue';
import axios from 'axios';

const gnss = reactive({ gnssdata: [] });
const inputData = reactive({
  gga: 0, rmc: 0, dop: 0, gsa: 0, gsv: 0, heading: 0, zda: 0, gst: 0
});

const fetchBackendData = async () => {
  try {
    const { data: backendData } = await axios.get('/api/gnss-data');
    gnss.gnssdata = Object.entries(backendData)
      .filter(([key, value]) => value !== 0)
      .map(([key]) => key.toUpperCase().replace('_FREQ', ''));
    for (const [key, value] of Object.entries(backendData)) {
      inputData[key.split('_')[0]] = value;
    }
  } catch (error) {
    console.error('Failed to fetch backend data:', error);
  }
};

onMounted(fetchBackendData);</code>

<code class="vue"><el-input v-model="inputData.gga" :disabled="inputData.gga === 0"></el-input></code>