I'm using v-slot:activator with v-btn in my Vuejs project. it works fine but the button stays hovered as if it was pressed

       <v-dialog v-model="dialog" max-width="600px">
        <template v-slot:activator="{ on, attrs }">
          <v-btn color="#F65C38" dark class="mt-1 mr-2" width="209px" v-on="on" v-bind="attrs"> Example Btn </v-btn>
        </template>
        <v-card>
          <v-card-title>
            <span class="text-h5">{{ formTitle }}</span>
          </v-card-title>

          <v-card-text>
            <v-form ref="form" v-model="valid">
              <v-container>
                <v-row>
                 

                  
               
           
                </v-row>
              </v-container>
            </v-form>
          </v-card-text>

          <v-card-actions class="d-flex justify-center">
            <v-btn color="#f66037" plain @click="close" elevation="4" dark width="209" class="mb-6"> No </v-btn>
            <v-btn color="#F65C38" @click="save" dark width="209" class="mb-6"> save </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

data:

dialog: false

watch:

  dialog(val) {
      val || this.close();
    },

method:

    close() {
  this.dialog = false;
  this.$nextTick(() => {
    this.editedItem = Object.assign({}, this.defaultItem);
    this.editedIndex = -1;
  });

before click

after click