V-Dialog not closing issue

index.html

<div id="app">
  <v-app id="inspire">
    <v-btn @click="isOpenModel = true"> Open model </v-btn>
    
<!--   opens the v-dialog when isOPenModel is set to true   -->
    <v-dialog @keydown.esc="closeModel()" v-model="isOpenModel" max-width="500px">
      <v-card>
        <!--    Heading provided for the pop-up    -->
        <v-toolbar color="grey lighten-4">
          <v-toolbar-title>Model heading</v-toolbar-title>
        </v-toolbar>
        <!--   Content to be displayed inside model       -->
        <v-card-text>
          <v-expansion-panels>
            <v-expansion-panel
              v-for="(item,i) in 5"
              :key="i"
            >
              <v-expansion-panel-header>Item</v-expansion-panel-header>
              <v-expansion-panel-content>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-card-text>
        <!--    Dialog actions      -->
        <v-card-actions>
          <v-btn text color="error"       @click.stop="closeModel()">Close</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-app>
</div>

script.babel

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    isOpenModel : false,
    expansionPanelList : [
      
    ]
  }),
  methods : {
    closeModel(){
      console.log("Actions is been triggered")
      this.isOpenModel = false
    }
  }
})

scripts

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.28/dist/vuetify.min.js"></script>

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.28/dist/vuetify.min.css" rel="stylesheet" />

v-dialog-not-closing-issue.markdown

V-Dialog not closing issue

A Pen by kushagra on CodePen.

License.