[Vuejs]-Vuetify 2.6.12 – Problem with v-data-table inside v-dialog

      var app = new Vue({
        el: '#app',
        template: '#main',
        vuetify: new Vuetify(),
        data:
{
      dlgVisible: false,
      header:
      [
        {
        value: 'fname',
        text: 'First Name'          ,
        class: 'font-weight-bold text-subtitle-1',
        },
        {
        value: 'lname',
        text: 'Last Name'         ,
        class: 'font-weight-bold text-subtitle-1',
        },
        {
        value: 'salary',
        text: 'Salary'          ,
        class: 'font-weight-bold text-subtitle-1',
        },
      ],
      rows:
      [
        {
          fname: 'John',
          lname: 'Doe',
          salary: 1000
        },
        {
          fname: 'John',
          lname: 'Doe',
          salary: 1000
        },
        {
          fname: 'John',
          lname: 'Doe',
          salary: 1000
        },
      ],
},
});

    <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@6.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
</div>

<template id="main">
  <v-app>
    <v-btn color="primary" @click="dlgVisible = true">Show dialog</v-btn>
    <v-dialog v-model="dlgVisible">
      <v-card>
        <v-card-title class="primary white--text py-2">Dialog</v-card-title>
        <v-card-text>
      <v-data-table :items="rows" :headers="header">
       </v-data-table>
       </v-card-text>
       <v-card-actions class="justify-center">
         <v-btn color="primary" @click="dlgVisible = false">Close</v-btn>
         </v-card-actions>
         </v-card>
      </v-dialog>
  </v-app>
</template>

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