VuetifyのClearableはtextfieldとselectで戻り値が違う

TL;TR

textfieldの場合にはnull
selectの場合にはundefined

何が問題なの？

人によっては問題ではないのかもしれませんが、axiosでポストする際に、オブジェクトのバリューがundefinedだとサーバーサイドにそもそも送信されません。

axios.post('http://localhost:3000/api', {sample: 'a', test: undefined})

//Request Body {sample: 'a'}

そのため単純にv-selectにてクリアブルを使用していると、そのプロパティに関しては、まず存在チェックをかける必要があり、その上で値の確認をする必要があります。
テキストフィールドの場合と挙動が違うのとあらかじめ設定しておいたプロパティに存在チェックをかけなければいけないのも面倒だったので、selectに関してもクリアしたときにnullを返すように修正してみました。

<template>
  <div>
    <v-text-field
      label="sample"
      v-model="form.sampleText"
     ></v-text-field>
     <v-select
       label="select"
       v-model="form.sampleSelect"
       :items="selection"
       append-icon="close"
       @click:append="form.sampleSelect = null"
      ></v-select>
  </div>
</template>
<script>
export default {
  data: () => ({
    form: {
      sampleText: '',
      sampleSelect: null,
    }    
  }) 
}
</script>