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>
    <Foo v-if="dialog" @close="dialog = false"></Foo>
  </v-app>
</div>

JavaScript

const Foo = {
  template: `
    <v-dialog v-model="dialog" @click:outside='close'>
      <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="close">Disagree</v-btn>
          <v-btn text color="green darken-1" @click="close">Agree</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
`,
  data: () => ({
    dialog: false,
    input: ''
  }),
  mounted() {
    this.dialog = true
  },
  methods: {
    close() {
      this.dialog = false
      setTimeout(() => {
        this.$emit('close')
      }, 150)
    }
  }
}


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