Vue: Data is not changing with Vuex getter?

Question

I have a modal component that I was triggered when different components mutate the triggerModalState field. I have a getter in my Vuex store called getFulfillmentModalState. The modal is driven off of the local data field called dialog, which I have set to be the value of the getter this.$store.getters.getFulfillmentModalState. I am checking the value of this.$store.getters.getFulfillmentModalState, and it is true after I trigger the modal, but the dialog data is still false. What am I doing wrong here?

<template>
    <div class="fulfillment-modal-component">
        <v-row justify="center">
            <v-dialog v-model="dialog" persistent max-width="290">
                <v-card>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="rgba(53, 87, 151, 0.85)" text @click="changeModalState(true)">Cancel</v-btn>
                        <v-btn color="rgba(53, 87, 151, 0.85)" text @click="changeModalState(false)">Continue</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </v-row>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    import store from './../../store/store';

    export default {
        name: 'fulfillment-modal',

        mounted() {

        },

        data() {
            return {
                dialog: this.$store.getters.getFulfillmentModalState
            }
        },
    }
</script>

Answer 1

dialog isn't reactive in this case because it's declared in data(). Move dialog to computed to make it reactive:

//...
export default {
  data() {
    return {
      //dialog: /*..*/   // move to computed
    }
  },
  computed: {
    dialog() {
      return this.$store.getters.getFulfillmentModalState
    }
  }
}

demo