Vue.js & Vuetify: Show v-dialog using a method

[MexicanR]

I want to open a v-dialog using a method but I can't seem to find a way that works. I've tried using a v-if and I've tried setting the data variable to true but none of those things work. In my method the console.log does occur and the data variable is set to true but the dialog does not appear. Any suggestions?

My Code:

<template>
  <v-container>
    <v-layout row wrap>
      <v-flex pb-3 v-for="patient in patients" :key="patient.id">
        <v-card class="primary">
          <v-container fluid>
            <v-layout row>
              <v-flex>
                <v-card-title primary-title>
                    <h2 class="white--text">{{ patient.name }} | Last Submission: {{ patient.last_submission }}</h2>
                </v-card-title>
                <v-card-actions>
                  <v-btn flat dark @click.native="openDialog('removeCheck', patient.id, patient.name)"><v-icon left>delete_forever</v-icon>Remove User</v-btn>
                  <v-btn flat dark @click="change_pass = !change_pass"><v-icon left>lock</v-icon>Change Password</v-btn>
                  <v-btn flat dark @click.native="show = !show"><v-icon left>{{ show ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</v-icon>View Bloodsugars</v-btn>
                </v-card-actions>
                <v-slide-y-transition>
                  <v-data-table v-bind:headers="headers" :items="patient.bloodsugars" v-show="show">
                    <template slot="items" slot-scope="props">
                      <td>{{ props.item.date }}</td>
                      <td class="text-xs-right">{{ props.item.bb }}</td>
                      <td class="text-xs-right">{{ props.item.ab }}</td>
                      <td class="text-xs-right">{{ props.item.bl }}</td>
                      <td class="text-xs-right">{{ props.item.al }}</td>
                      <td class="text-xs-right">{{ props.item.bd }}</td>
                      <td class="text-xs-right">{{ props.item.ad }}</td>
                      <td class="text-xs-right">{{ props.item.am }}</td>
                    </template>
                    <template slot="no-data">
                      <v-alert :value="true" color="error" icon="warning">
                        Sorry, nothing to display here :(
                      </v-alert>
                    </template>
                  </v-data-table>
                </v-slide-y-transition>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
      <v-btn class="primary" @click.stop="newp = !newp" fab dark fixed bottom right><v-icon>add</v-icon></v-btn>
    </v-layout>

    <v-dialog v-if="removeCheck == true" max-width="500px">
    <v-card>
      <v-card-title>
        <span>Are you sure you want to remove  from the database?</span>
      </v-card-title>
      <v-card-actions>
        <v-btn @click="removePatient()" color="red" flat>Remove</v-btn>
        <v-btn color="primary" flat @click.stop="removeCheck=false">Cancel</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  </v-container>
</template>

<script>
  export default {
    computed: {
      patients () {
        return this.$store.getters.loadedPatients
      }
    },
    data: () => ({
      change_pass: false,
      removeCheck: false,
      show: false,
      newp: false,
      headers: [
        {
          text: 'Date',
          align: 'left',
          sortable: true,
          value: 'date'
        },
        { text: 'Before Breakfast', value: 'bb', sortable: false },
        { text: 'After Breakfast', value: 'ab', sortable: false },
        { text: 'Before Lunch', value: 'bl', sortable: false },
        { text: 'After Lunch', value: 'al', sortable: false },
        { text: 'Before Dinner', value: 'bd', sortable: false },
        { text: 'After Dinner', value: 'ad', sortable: false },
        { text: '12AM', value: 'am', sortable: false }
      ]
    }),
    methods: {
      openDialog (dialog, id, patient) {
        this.$data.removeCheck = true
        console.log('gjhghjj')
      },
      changePatientPassword (patientid) {
      },
      createNewPatient () {
      },
      removePatient (patientid) {
      }
    }
  }
</script>

[suXin]

Never used Vue, but [URL="https://vuetifyjs.com/components/dialogs"]quick google reveals[/URL] that you have to put a boolean variable into data section and specify it's name in [B]v-model[/B] property, not [B]v-if[/B]

[MexicanR]

[QUOTE=suXin;52911044]Never used Vue, but [URL="https://vuetifyjs.com/components/dialogs"]quick google reveals[/URL] that you have to put a boolean variable into data section and specify it's name in [B]v-model[/B] property, not [B]v-if[/B][/QUOTE]

I've spent hours googling.... I can't thank you enough!