title: Close Vuetify dialog with Vuex
body: <p>After hours of searching and trying to find the correct method my n00b brain exploded.
  I've tried so many things that I'm complete lost. Everything works like I want it to, can remove the customer I want, the front refreshes etc. Except the dialog.</p>
  
  <p>Can you please explain how to close this dialog?</p>
  
  <p>Here is my dialog.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;template&gt;
        &lt;tbody&gt;
          &lt;tr v-for="customer in AllCustomers" :key="customer.id" class="todo"&gt;
            &lt;td&gt;{{customer.ID}}&lt;/td&gt;
            &lt;td&gt;{{ customer.name }}&lt;/td&gt;
            &lt;td&gt;{{customer.telephone}}&lt;/td&gt;
            &lt;td&gt;{{customer.email}}&lt;/td&gt;
            &lt;v-btn color="success" @click="showDeleteDialog(customer)"&gt;DELETE&lt;/v-btn&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/template&gt;
      &lt;v-dialog v-model="dialogDelete" persistent max-width="500px"&gt;
        &lt;v-card&gt;
          &lt;v-card-title&gt;Delete&lt;/v-card-title&gt;
          &lt;v-card-text&gt;Weet je zeker dat je {{customerToDelete}} wenst te verwijderen?&lt;/v-card-text&gt;
          &lt;v-card-actions&gt;
            &lt;v-btn color="primary" text @click="close"&gt;Annuleer&lt;/v-btn&gt;
            &lt;v-btn color="primary" text @click="deleteCustomer(customer.ID)"&gt;Verwijderen&lt;/v-btn&gt;
          &lt;/v-card-actions&gt;
        &lt;/v-card&gt;
      &lt;/v-dialog&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  
  &lt;script&gt;
  import { mapGetters, mapActions, mapState } from "vuex";
  
  export default {
    name: "AllCustomers",
  
    data() {
      return {
        customerToDelete: "",
        dialogDelete: false
      };
    },
  
    methods: {
      ...mapActions(["fetchAllCustomers", "deleteCustomer"]),
  
      async close() {
        this.dialogDelete = false;
      },
  
      async showDeleteDialog(customer) {
        this.customer = Object.assign({}, customer);
        this.customerToDelete = this.customer.name;
        this.dialogDelete = !this.dialogDelete;
        this.$store.commit("toggleDialog");
      }
    },
  
    computed: mapGetters(["AllCustomers"]),
    created() {
      this.fetchAllCustomers();
    },
    ...mapState(["dialogDelete"])
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>And here my module js.</p>
  
  <pre><code>import axios from 'axios';
  
  const state = {
      customers: [],
      dialogDelete: false
  };
  
  const getters = {
      AllCustomers: state =&gt; state.customers
  };
  
  const actions = {
      async fetchAllCustomers({ commit }) {
          const response = await axios.get(
              'http://localhost:8888'
          );
          console.log(response.data.data);
          commit('setAllCustomers', response.data.data);
      },
  
      async deleteCustomer({ commit }, id) {
          await axios.delete(`http://localhost:8888/delete`, {
              data: {
                  id: id
              }
          })
          console.log(id)
          commit('removeCustomer', id, this.dialogDelete = false);
      },
  
  }
  
  const mutations = {
      setAllCustomers: (state, customers) =&gt; (state.customers = customers),
      removeCustomer: (state, id) =&gt;
          (state.customers = state.customers.filter(customer =&gt; customer.ID !== id)),
  }
  
  export default {
      state,
      getters,
      actions,
      mutations
  };
  </code></pre>