Vue datepicker locale and text box format

I am newbie in Vue when I design datepicker like below steps
1- Vue design (I copied from Vue source site) :

<v-menu ref="menu1"
        v-model="menu1"
        :close-on-content-click="false"
        transition="scale-transition"
        offset-y
        full-width
        max-width="290px"
        min-width="290px">
    <template v-slot:activator="{ on }">
        <v-text-field v-model="fromDate"
                        label="from date"
                        hint="MM/DD/YYYY format"
                        persistent-hint
                        prepend-icon="event"
                        v-on="on" outlined></v-text-field>
    </template>
    <v-date-picker v-model="fromDate" no-title @input="menu1 = false" locale="fa" outlined></v-date-picker>
</v-menu>

date variable:

fromDate: new Date().toLocaleDateString('fa-IR');

by above config date will appear in text box but when datepicker opened there is nothing that user can selected, like below screenshot:

but when I change the date variable like this:

fromDate: new Date().toISOString().substr(0, 10)

datepicker will open but the value in text box still is Gregorian like:

why when we set locale of datepicker the value in textbox will appear in Gregorian format.