nuxt.js × graphQLでの詳細ページエラー(GraphQL error: Variable $id of type ID! was provided invalid value)

Question

環境(バージョンはほぼ最新環境)

*サーバー
rails > 6.0
ruby '2.7.2'

*フロント
Nuxt.js
APIは graphQLでapolloクライアント使用

前提・実現したいこと

todoリストアプリのtodoの詳細ページを作成したい。

• 作成中のアプリ：

nuxt.jsとRailsでtodo管理アプリを作成しております。
todoの一覧とtodoの入力は実装できているのですが、詳細ページの表示ができません。
モデルはtaskモデルとしていますい。

rails側でのtask_typeは下記のように定義しています。

.../graphql/types/task_type.rb

module Types
  class TaskType < Types::BaseObject
    field :id, ID, null: false
    field :title, String, null: true
    field :description, String, null: true
    field :completed, Boolean, null: true
  end
end

ファイル構成として

-apollo
 -mutations
 -queries
  -getTask.gql ← 処理を記載①
-pages
 -tasks
  -_id.vue　← 処理を記載②
 -index.vue

getTask.gql

query getTask($id: ID!) {
  task( id: $id ) {
    id
    title
    description
    completed
  }
}

_id.vue

※処理を簡略化するためにコメントアウトでクリックなども残しています。
<template>
  <v-container>
    <v-col cols="6" offset="3">
      <v-card>
        <!-- <v-card-title>task.title</v-card-title> -->
        <v-card-title>{{task.title}}</v-card-title></v-card-title>
        <v-card-text>{{task.description}}</v-card-text>
        <!-- <v-card-text>{{ task.description }}</v-card-text> -->
        <!-- <v-checkbox v-model="task.completed" @click="updateTask(task)" /> -->
        <v-checkbox />
        <!-- <v-btn @click="deleteTask(task)"> -->
          <v-btn>
          <v-icon>clear</v-icon>
        </v-btn>
      </v-card>
    </v-col>
  </v-container>
</template>

<script>
import task from '~/apollo/queries/getTask.gql'

export default {
  data() {
    return {
      task: {}
    }
  },
  apollo: {
    task: {
      query: task,
      valiables () {
        return {
          id: this.$route.params.id
        }
      }
    }
  }
}
</script>

railsではquery_type.rbで下記の用に定義しています。

field :tasks, [Types::TaskType], null: false, description: "タスクを全件取得"
    def tasks
      Task.all
    end

    field :task, Types::TaskType, null: false, description: "タスクを1件取得"  do 
      argument :id, ID, required: false
    end
    def task(id:)
      Task.find(id)
    end

発生している問題・エラーメッセージ

実際にtaskのデータが存在するhttp://localhost:8080/tasks/5に接続すると下記エラーが出ます。

GraphQL error: Variable $id of type ID! was provided invalid value

8080/のタスク一覧ページは問題なく表示されています。