JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.2.4/dist/vuetify.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@4.8.95/css/materialdesignicons.min.css">
<div id="app">
  <v-app>
    <v-btn dark color="primary" @click.stop="dialog = true">Open Dialog</v-btn>
    <v-dialog v-model="dialog">
      <transition :duration="150">
        <Foo v-if="dialog"></Foo>
      </transition>
    </v-dialog>
  </v-app>
</div>

JavaScript

const Foo = {
  template: `
    <v-card>
      <v-card-title class="headline">Use Google's location service?</v-card-title>
      <v-card-text>
      	<div>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</div>
      	<v-text-field v-model="input" />
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn text color="green darken-1" @click="$parent.dialog = false">Disagree</v-btn>
        <v-btn text color="green darken-1" @click="$parent.dialog = false">Agree</v-btn>
      </v-card-actions>
    </v-card>
`,
  data: () => ({
    input: ''
  })
}


new Vue({
  vuetify: new Vuetify(),
  components: {
    Foo
  },
  data: () => ({
    dialog: false
  })
}).$mount('#app')