Nuxtで詳細ページ用のパラメーターがうまく取得できない

Question

前提・実現したいこと

Railsのshowを使用して詳細ページを取得できるようにしたいです。
RaisとNuxtでアプリケーションを作成しています。
詳細ページを表示しようと思い、リクエストを送ったところエラーが出てしまいました。
原因はNuxt側で送ったパラメーターが /:1なのに対してRails側で正しく情報を取得するには /1とする必要がありました。現在。this.$route.params.idでURLの情報を取得してRails側に送っているのですが、idにコロンが入らないようにデータを取得する方法はあるのでしょうか

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

ネットワークタブ

xhr.js?b50d:177 GET http://localhost:3000/api/v1/posts/:1 404 (Not Found)

createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 404
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:62)

サーバーログ

api_1    | Started GET "/api/v1/posts/:1" for 172.22.0.1 at 2021-08-25 07:30:20 +0900
api_1    | Processing by Api::V1::PostsController#show as HTML
api_1    |   Parameters: {"id"=>":1"}
api_1    |   Post Load (0.8ms)  SELECT "posts".* FROM "posts" WHERE "posts"."id" = $1 LIMIT $2  [["id", nil], ["LIMIT", 1]]
api_1    |   ↳ app/controllers/api/v1/posts_controller.rb:17:in `show'
api_1    | Completed 404 Not Found in 8ms (ActiveRecord: 0.8ms | Allocations: 656)
api_1    | 
api_1    | 
api_1    |   
api_1    | ActiveRecord::RecordNotFound (Couldn't find Post with 'id'=:1):
api_1    |   
api_1    | app/controllers/api/v1/posts_controller.rb:17:in `show'

該当のソースコード

Nuxt

<template>
(省略)
</template>
<script>
import * as url from '@/store/constants/url'
export default {
  computed: {
    selectedRegisteredBook () {
      return this.$store.state.book.selectedRegisteredBook
    }
  },

//Rails側にリクストをする
  mounted () {
    this.$axios.$get(url.POST_API + 'posts/' + this.$route.params.id)//ここで値を取得するとコロンが入ってしまい、ページをうまく取得できない
      .then((response) => {
        this.$store.commit('book/selectedRegisteredBook', response)
      })
  }
}
</script>

Rails

	def show
		post = Post.find(params[:id])
		render json: post, status: 200
 	end

試したこと

・Railsコンソールで値の取得を試みました。結果、取得に成功しました。
・URLを/:1→ /1に変更して正しい情報が表示されるのを確認できました。
・公式ドキュメントで確認したところ、値の取得方法しか記載がありませんでした。

補足情報（FW/ツールのバージョンなど）

Nuxt 2.15
Rails6.1