"this" is "undefined" in apollo query (vue + nuxt)

Question

I'm using GraphQL (Symfony + API Platform) with Vue Apollo and Nuxt.

I have a detail page for an issue and want to load the specific issue, but I always get Cannot read property 'issueId' of undefined because this is undefined. This is the relevant script part of my Page

<script>
import gql from 'graphql-tag'

export default {
  data() {
    return {
      issueId: null
    }
  },
  created() {
    this.issueId = this.$route.params.id
  },
  apollo: {
    issue: {
      query: gql`
        query($issueId: ID!) {
          issue(id: $issueId) {
            id
            description
          }
        }
      `,
      variables: {
        issueId: this.issueId
      }
    }
  }
}
</script>

When I set issueId to issues/3, it works

variables: {
    issueId: 'issues/3'
}

Answer 1

I found the solution

As described here, if just have to turn

variables: {
  issueId: this.issueId
}

into

variables() {
  return {
    issueId: this.issueId
  }
}

But I don't understand the difference