setup returns empty sections before getSectionAndSubsection load data

I am a writing an application using vue 3. I want to load data from a server using axios

The setup is return empty section array but course.getSectionAndSubsection gets data from the server

Template

The template displays the data get from server

<div v-if="state.length > 0 ">
                <div class="__course-sub-section" v-for="(section, index) in state.section" :key="index">
                <div><input type="text" placeholder="Enter Section Title" v-model="section.section_title" class="section-title form-control x_focus"></div>
                    <div class="__upload-section d-flex justify-content-between align-items-center" v-for="(sub_section, idx) in section.sub_state" :key="idx">
                        <div class="d-flex">
                            <input type="text" placeholder="Enter Sub Section Title" v-model="sub_section.sub_section_title"  class="section-title form-control x_focus">
                            <div class="__choose">
                                <label for="">
                                    <div>
                                        <input type="file" @change="uploadFile( $event, index, idx )" name="" id="">
                                        Upload File
                                    </div>
                                    <img src="@/assets/images/upload.png" alt="">
                                </label>
                                    
                            </div>
                        </div>
                        <div class="__sub-section-image">

                            <div class="placeholders">
                            <div v-if="sub_section.subSectionAdded">
                                <img :src="sub_section.imageURL"  alt="">
                            </div>
                            <div v-if="!sub_section.subSectionAdded">
                                <img src="@/assets/images/upload.png"  alt="">
                            </div>
                                
                            </div>
                        </div>
                            
                        <button @click="addSubSection(index)" class="app_button primary_btn d-flex mt-4">
                            Add Sub Section
                        </button>
                    </div>
                    </div>
                </div>
            </div>

Javascript

I tried getting the data from the server. but the setup return empty section array before getting the data from the server.

<script>
  export default {
    name: 'EditSubSection',
    setup(){

    let state = reactive({"sections" :[
        {
            'section_title': '', 
            'sub_state': [
                {
                    'sub_section_title': '', 
                    'imageURL': '' as any,
                     'url': '',
                     'subSectionAdded': false
                }
            ]
        }
    ]});
      Course.getSectionAndSubsections("get-section-and-subsections", id)
      .then(response => {
        state.sections = response.data.sections;
        console.log("state form edit sub state",state.sections); 
      })
      .catch(err => {})
      .finally(() => {
        showLoader(false)
      });
    return {state}
    }
  }
</script>