Vue.js: using a data object's method in inline event handler

I have a Vue(2.5+) component where I'm setting a data property to a new Foo object. Using foo.bar() in the click handler calls the method correctly, but throws Uncaught TypeError: cannot set property 'someVariable' of null when trying to modify properties inside the Foo class. Setting it up so that Foo is an object literal instead of a class also does not resolve the error.

I suspect something weird is happening with this, between the component and the class?

Vue component

import Foo from './foo.js'
export default {
    template: `<div @click="foo.bar"></div>`,
    data() {
        return {
            foo: new Foo()
        }
    },
    created() {
        console.log(foo); // foo is not null here
    }
}

Foo class

export default class Foo
{
    constructor()
    {
        this.someVariable = 0;
    }

    bar(e)
    {
        // modify this.someVariable
    }
}

but if I change the vue component to reference the external method through it's own "methods" property, it works.

Vue component (working)

import Foo from './foo.js'
export default {
    template: `<div @click="bar"></div>`,
    data() {
        return {
            foo: new Foo()
        }
    },
    methods: {
        bar(e) {
            this.foo.bar(e);
        }
    }
}