Nuxt Apollo GraphQL error: Variable of required type was not provided

I am using Nuxt.js with Apollo and trying to access GraphQL from WordPress. I do manage to get data so I know it works.

I am trying to display a post depending on its URI, in the file _slug.vue.

pages/
--| _slug/
--| index.vue

The issue is when I try to pass a variable to the query. I get the following error GraphQL error: Variable "$uri" of required type "ID!" was not provided. (I know there is a post/data on the page/URI I am accessing).

<template>
  <article>
    {{ post }}
  </article>
</template>

<script>
import fetchPost from '~/apollo/fetchPost.gql'

export default {
  apollo: {
    post: {
      query: fetchPost,
      varibles() {
        return {
          uri: this.$route.path,
        }
      },
    },
  },
}
</script>

While the fetchPost.gql file looks like this (I have also tried inlining the query, but it makes no difference).

query queryPost($uri: ID!) {
  post(id: $uri, idType: URI, asPreview: false) {
    categories {
      nodes {
        name
        uri
      }
    }
    content(format: RENDERED)
    date
    excerpt(format: RENDERED)
    featuredImage {
      node {
        altText
        caption(format: RENDERED)
        sourceUrl(size: LARGE)
        mediaItemUrl
      }
    }
    id
    modified
    postId
    slug
    title(format: RENDERED)
    uri
  }
}

The nuxt.config.js looks like this.

apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: process.env.WPGRAPHQL_ENDPOINT,
      }
    }
  },

  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'custom',
        path: '/:slug*',
        component: '~/pages/_slug.vue'
      })
    }
  },

Anyone have any idea why I get the error, and how I could fix it?

I wrote variables the wrong way. So the following works.

 variables() {
    return {
      uri: this.$route.path,
    }