InputMask somehow clears the initial value to empty string

[wanglin86769]

I am using InputMask to display and input date value as yyyy-mm-dd string, and my initial value is fetched from a backend API using axios as promise. I found that InputMask will automatically clear the initial value to empty string when the promise delay is within specific timing.

The detailed issue description is as follows:

1. If I display value using InputMask when the promise delay is about 10ms, the issue occurs.
2. If I display value using another component InputText when the promise delay is about 10ms, the issue is gone.
3. If I display value using InputMask when the promise delay is about 20ms, the issue is gone.

<template>
    <div>
        <Button label="Test" @click="print" />

        <!-- Using InputMaks -->
        <label>dateOfBirth: </label><InputMask mask="9999-99-99" v-model="user.dateOfBirth" />
        <label>dateOfWork: </label><InputMask mask="9999-99-99" v-model="user.dateOfWork" />

        <!-- Using InputText -->
        <!-- <label>dateOfBirth: </label><InputText type="text" v-model="user.dateOfBirth" />
        <label>dateOfWork: </label><InputText type="text" v-model="user.dateOfWork" /> -->
    </div>
</template>

<script>

export default {
    data() {
        return {
            user: {}
        }
    },
    created() {
        /*** No promise ***/
        // this.user = { dateOfBirth: '1985-01-01', dateOfWork: '2013-01-01' }
        // console.log(this.user.dateOfBirth);
        // console.log(this.user.dateOfWork);
             
        /*** Promise with 10ms delay ***/
        setTimeout(() => {
             this.user = { dateOfBirth: '1985-01-01', dateOfWork: '2013-01-01' }
             console.log(this.user.dateOfBirth);
			 console.log(this.user.dateOfWork);
        }, 10);

        /***  Promise with 20ms delay ***/
        // setTimeout(() => {
        //      this.user = { dateOfBirth: '1985-01-01', dateOfWork: '2013-01-01' }
        //      console.log(this.user.dateOfBirth);
		// 	 console.log(this.user.dateOfWork);
        // }, 20);
    },
    methods: {
        print() {
			console.log(this.user.dateOfBirth);
			console.log(this.user.dateOfWork);
		}
    }
}
</script>

<style scoped>

</style>