Why v-dialog wont pop out?

See more:

Javascript

HTML5

vue.js

I'm trying to figure out why the V-Dialog wont popout and when im trying to click the button, the v-dialog should pop out but it didnt, and this is the error i got

[object Error]: 
{description: "'ShadowRoot' is not defined", 
message: "'ShadowRoot' is not defined", 
number: -2146823279, 
stack: "ReferenceError: 'ShadowRoot' is not defined at 
handleShadow (eval code:33314:3) at 
inserted (eval code:33334:5) at 
callHook$1 (eval code:6714:7) at 
callInsert (eval code:6653:9) at 
wrappedHook (eval code:2243:5) at 
invokeWithErrorHandling (eval code:1862:5) at 
invoker (eval code:2183:9) at 
invokeInsertHook (eval code:6380:9) at 
patch (eval code:6599:5) at 
Vue.prototype._update (eval code:3957:7)"}

What I have tried:

The HTML

<div>
      <v-data-table
        :headers="headers"
        :items="data"
        class="elevation-1"
        hide-default-footer
      >

        <template v-slot:[`item.action`]="{ item }">
          <v-btn depressed @click="view(item.book_id)" color="primary">View</v-btn>
        </template>
      </v-data-table>
      <v-text-field v-model="ItemPerPage" label="Items Per Page" @change="GettingDataPerItem"> 
        </v-text-field>
    </div>

    <v-dialog v-model="dialog" max-width="800px">
      <v-card>
        <v-card-title>
          Details Of Book
        </v-card-title>
        <v-form lazy-validation>
          <v-col cols="12" align-self="center">
            <v-layout wrap justify-center>
              <v-flex d-flex lg5 sm5 xs12>
                <v-text-field v-model="book_id" :readonly="true" class="allText" label="Book ID"/>
              </v-flex>
              <v-divider class="mx-4" vertical/>
            </v-layout>
          </v-col>
          <v-card-actions>
            <v-layout v-if="IsActive === 0" justify-end class="ma-4">
              <div>
                <v-btn @click="dialog = false" style="width:150px;margin-left:10px" color="#263238" class="white--text">Close</v-btn>
              </div>
            </v-layout>
          </v-card-actions>
        </v-form>
      </v-card>
    </v-dialog>

Script

export default {
  data() {
    return {
      dialog: false,
      //censored_code
    };
  },
view(emp_no) {
      this.$axios
        .$post(`some/api/.......`, {
          book_id: book_id,
        })
        .then((res) => {
            //result of the respond data
            this.dialog = true
        });
    },
},

When i read the code like over 20 times, it looks fine with me, and read the script over and over and nothing wrong to me. This ShadowRoot annoyed me, how to fix this? should upgrade something?