Vuetify - How to trigger method when clear a v-text-field

Call the reset function of the input field like:

<v-text-field ref="inputRef"></v-text-field>
<v-btn @click="clearInput">clear</v-btn>

<script>
   export default {
     methods:{
       clearInput() {
          this.$refs.inputRef.reset()
       }
     }
   }

Use the clear-icon-cb prop. This allows you to use a custom callback function when the clear icon when clicked.

<v-text-field
  clearable
  :clear-icon-cb="onClearClicked">
</v-text-field>

onClearClicked () {
  // do something
}

You can use the clearableCallback

<v-text-field
    ref="inputRef"
    class="mt-2 mb-0"
    clearable
    .....
 >
</v-text-field>
<v-btn text @click="clearInput">clear</v-btn>

<script>
   export default {
     ......
     methods:{
       .....
       clearInput() {
          this.$refs.inputRef.clearableCallback()
       }
    }

   }

You can use the @click:clear="()" so you can clear your text at the same time it will call the function.

Here's the example

https://codepen.io/anon/pen/ePmLOg?editors=1010