VuetifyのDatepickerの値が消えない

VuetifyのDatepicker、すごく便利なんだけど、v-text-fieldと一緒に使った時によく使うclearableで値が消えないなーと思っていたメモ。

何したのか

v-text-fieldに@click:clear="date = null"を追加した。

コードは公式サンプルを利用
https://vuetifyjs.com/en/components/date-pickers#date-pickers-formatting-date-using-external-libs

<template>
  <v-menu
    v-model="menu1"
    :close-on-content-click="false"
    full-width
    max-width="290"
  >
    <template v-slot:activator="{ on }">
      <v-text-field
        :value="computedDateFormattedMomentjs"
        clearable
        label="Formatted with Moment.js"
        readonly
        v-on="on"
        @click:clear="date = null" // ←を追加
      ></v-text-field>
    </template>
    <v-date-picker
      v-model="date"
      @change="menu1 = false"
    ></v-date-picker>
  </v-menu>
</template>

消えなかった理由

v-text-fieldを普通に使ってるだけならclearableオプションを追加するだけでいいけど、他の要素と組み合わせて使う時readonlyをつけてる。多分これが原因。
見た目部分だけは消せるけど、v-modelで紐付けられた値に変更後の値を返さないよーってなってるはず。

以上！