Vue not seeing function passed from separate component

Question

Inside component A I have a watch object like this:

watch: {
delete_todo_object: {
    handler(object) {
        if (object.error) {
            this.showSnackBar({
                text: `Could\'nt delete task. Reason: ${object.error}`,
                color: "error",
                close_button_text: "Close",
                close_button_function: () => hideSnackBar()
            });
        }
  },
  deep: true
},

and a function like this:

methods: {
hideSnackBar() {
    this.$store.commit("notifications/hideSnackBar");
},

close_button_function is correctly finding the hideSnackBar function I have inside component A and passing it along to my vuex module. Component B has a computed property that returns the same object stored in the store.

computed: {
    snackbar_object () {
        return this.$store.state.notifications.snackbar;
    }
},

However, when component B tries to use the function, it says "hideSnackBar is not defined".

<v-btn
    color="primary"
    flat
    @click="snackbar_object.close_button_function"
  >

I checked and made sure the function is being sent along to my vuex store and assigned to the right object property there.

Is what I'm trying to do not possible?

Answer 1

You call hideSnackBar as if it exists in showSnackBar context.

close_button_function: () => hideSnackBar()

Please, try

close_button_function: () => this.hideSnackBar()