Why V-Dialog wont show up? - vue.js

Question

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)"}
and here are the code :
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>
<span class="subtitle-1 font-weight-bold">Details Of Book</span>
</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>
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
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
});
},
},
This ShadowRoot annoyed me, how to fix this? should upgrade something?

Answer 1

Make sure your <v-data-table> and <v-dialog> elements are contained within a single root:
<template>
**<something>**
<div><v-data-table></v-data-table></div>
<v-dialog/>
**</something>**
</template>

Answer 2

Finally solve the problem, i'm using microsoft edge and then switch to firefox and the v-dialog poped out