Vuetify tooltip refresh/rerender on hover

Question

I have a vuetify tooltip component. In the tooltip I have a {{date | moment}}. I get a static a few seconds ago.

I want every time I hover over the button, to refresh the button tooltip to the current elapsed time (10 minutes ago for example). I can't figure out how to rerender the tooltip on hover with the updated filter.

filters: {
    moment: function (date) {
      return moment(date).fromNow();
    },
}, 

Answer 1

If I understood correctly about what you are trying to achieve, this idea might help you (below is the code pen link):

simulated elapsed time on button hover

<div id="app">
  <v-app id="inspire">
   <div class="text-center d-flex align-center justify-space-around">
     <v-tooltip bottom>
       <template v-slot:activator="{ on, attrs }">
         <v-btn
          color="primary"
          dark
          class="mt-10"
          v-bind="attrs"
          v-on="on"
          @mouseover="setElapsedTime"
          >
           Button
          </v-btn>
       </template>
    <span>{{ elapsedTime }}</span>
  </v-tooltip>
</div>

new Vue({
 el: '#app',
 vuetify: new Vuetify(),
 data() {
   return {
     startTime: Date.now(),
     elapsedTime: '',
   }
 },
methods: {
  setElapsedTime() {
    const millis = Date.now() - this.startTime;
    this.elapsedTime = `seconds elapsed = ${Math.floor(millis / 1000)}`;
  }
} })

tooltip text is bound to a variable in the data object, whenever the user hover over the button, a method is called which updates the variable in the data object