Binding query variables in TypeScript

[LeoAdamek]

I'm trying to figure out how to bind variables to component properties in TypeScript.

I can get a query with static variables to work with the following:

@Component({
  apollo: {
    items: {
      variables: {
        foo: 'Bar'
      },
      query: gql`query GetItems($foo: String) {
             items(foo: $foo) {
                id
                foo
             }
      }` 
  }
})
export default class MyComponent extends Vue {
     someProperty!: string
}

However I can't figure out how to bind the variable foo to the someProperty property of the component. I've tried using an arrow function for the variables but this isn't defined when the component declaration is processed so it fails.

I've spent a few hours searching this but can't find any examples of this. Anyone got a working use-case?