v-calendar how to get default input value from API

I'm using Vue, v-calendar library and moment library.

I want that when a page is rendered, a input tag should get a value from getAPI(), but it doesn't.
I guess it's because start and end in the range data is ''.
so I tried to assign data into the input value directly and it worked.
but I want to know why I should assign data in to input value directly.

Is there a way that doesn't use ref and using v-calendar properties?

Thanks in advance!

This is my template code below,

<form class="form" @submit.prevent>
   <Vc-date-picker
       v-model="range"
       :masks="masks"
       is-range
       :min-date="today"
  >
  <template v-slot="{ inputValue, inputEvents, isDragging }">
      <div class="rangeInput">
          <div class="eachInputWrapper">
              <input
                  id="eachInput"
                  ref="startInput"
                  :class="isDragging ? 'text-gray-600' : 'text-gray-900'"
                  :value="inputValue.start"
                  v-on="inputEvents.start"
              />
          </div>
       </div>
   </template>
   </Vc-date-picker>
</form>

This is my script code

data(){
   return{
        range: {
            start: '',
            end:  '',
        },
    }
},
methods:{
    dateFormat(data){
        return moment(data).format("YYYY-MM-DD");
    },
    getAPI(){     
        this.$thisIsAPI(Id,Data).then((data)=>{
            this.range.start = this.dateFormat(data.fromDate);
            this.range.end = this.dateFormat(data.expireDate);
        });
    },
},
created(){
    this.getAPI();
}

This is what I tried, and the input tag gets the value when the page is renderd.

getAPI(){     
        this.$thisIsAPI(Id,Data).then((data)=>{
            this.range.start = this.dateFormat(data.fromDate);
            this.range.end = this.dateFormat(data.expireDate);
        });
    this.$refs.startInput.value = this.dateFormat(this.botInfo.fromDt);
    this.$refs.endInput.value = this.dateFormat(this.botInfo.expireDt);
},