HTMLの input type=date フォームへの変更を window.confirm() の結果で反映させるかどうかで変えたい

Question

前提・実現したいこと

Vueにて<input type=date />の要素を変更する際に、変更していいかどうかの確認をwindow.confirm()で行いたいと考えています。
何か方法がありましたら教えていただきたいです。

発生している問題・エラーメッセージ

Vue のイベントとして@changeや@inputを利用した際は内部の関数でe.preventDefault()を実行してもフォームの表示日付が変更されてしまいます。
window.confirm()でキャンセルを選択した時は表示日付が変更されないようにしたいです。

該当のソースコード

<input type="date" @change="updateDate"/>

updateDate(e) {
    const confirm = window.confirm('変更しても良いですか？')
    if(confirm) {
        // 処理
    } else {
        e.preventDefault()
    }
}

試したこと

@clickのタイミングでは、datepicker が出現する前に判定が入ってしまい、今度はOKの際にdatepicker が出現しないようになってしまいました。

補足情報（FW/ツールのバージョンなど）

バージョン情報
Vue: 2.6.11

Answer 1

「値を変更する前に発生するイベント」というのは存在しないので、focus イベントで現在の値をどこかに保存しておいて、input change blur などのイベントで値が変わっていたら確認して取り消しなら保存した値に戻す、でいかがでしょうか。