Vue.js 如何在Vue js 3中根据API响应替换react 值

我试图根据API响应设置复选框的状态，但无法更改其状态.

App.vue

<script setup>
    import { ref, toRefs, reactive, onMounted } from "vue";
    import axios from "axios";
    import { Check, Close } from "@element-plus/icons-vue";
    import Loading from "../Loading.vue";

    let state = reactive({
        options: {},
        errors: [],
        loading: true,
        enableQuickView: true, // ???????? How to replace this value based on the API response?
    });

    let { loading, options, enableQuickView } = toRefs(state);

    let BASE_API_URL = 'http://wpvue.local/wp-json/quick_view_api/get_settings/';

    // ???? Doing API call to get the settings.
    let FetchOptions = () => {
        axios
            .get(BASE_API_URL + "get_options")
            .then((res) => {
                state.options = res.data.settings;
                console.log(res.data.settings);
                state.loading = false;
            })
            .catch((err) => {
                console.log(err);
                state.errors = err;
            });
    };

    // ???? Invoke FetchOptions function.
    onMounted(() => {
        FetchOptions();
    });
</script>
<template>
    <Loading v-if="loading" />
    <form v-else id="xox-settings-form" class="xox-form" @submit.prevent>
        <h3 class="option-box-title">{{ options.general.section_label }}</h3>
        <div class="input">
            <el-switch
                v-model="enableQuickView"
                class="enable-addonify-quick-view"
                size="large"
                inline-prompt
                :active-icon="Check"
                :inactive-icon="Close"
            />
        </div>
    </form>
</template>

API response:

{
    "settings": {
        "general": {
            "section_label": "General",
            "section_fields": {
                "enable_quick_view": {
                    "label": "Enable Quick View",
                    "description": "",
                    "type": "checkbox",
                    "value": "true"
                },
                "quick_view_btn_position": {
                    "label": "Quick View Button Position",
                    "description": "",
                    "type": "select",
                    "value": "",
                    "choices": {
                        "after_add_to_cart_button": "After Add to Cart Button",
                        "before_add_to_cart_button": "Before Add to Cart Button"
                    }
                }
            }
        }
    }
}

如果你看看这个应用程序.我正在使用的vue模板{{ options.general.section_label }}；它工作得很好.这是一个章节标题&amp；我不需要任何react 状态.

但是，对于像checkbox & select这样的元素，我希望它们是react 性的，以便稍后我可以看到用户更改的状态&amp；稍后将其更新到API.

非常感谢.