Vue component seems to not be running any functions

I have a nested vue component that renders a highchart. The chart itself renders fine and any default data renders with it.

However, any methods just aren't running, irrespective of whether the things they are doing is correct they aren't even running console.log if it's the only thing in the function. Additionally it would seem that the props aren't being used either.

Interestingly no errors are being reported either at compile or run time. I can verify that the event is being emitted but that is where it ends, it does not seem to be caught.

<template>
<b-container>
    <highcharts :options="boundariesChartOptions"></highcharts>
</b-container>
</template>

<script>
export default {
    computed: {},
    watch: {},
    data: function() {
        return {
            boundaries: [],
            boundariesChartOptions: {
                ...
            },
            props: {
                students: Object,
                test: Object,
            },
            created() {
                Event.$on('toggled_boundaries', (show_grade_boundaries) => {
                    console.log('caught any');
                    if (show_grade_boundaries) {
                        this.getBoundaries()
                        console.log('caught true');
                    }
                });
            },
            methods: {
                getBoundaries() {
                     console.log('anything');
                    axios.get('teacher/boundaries/' + this.test.id)
                        .then(response => {
                            this.boundaries = response.data;
                        })
                        .catch(function(error) {
                            console.log(error);
                        });
                },
            },
        }
    }
}
</script>