Vueのクリックイベント経由で、Rails側で楽天APIを叩き、返ってきたJSONをVueで受け取り、表示させたい

前提・実現したいこと

Rails側で楽天商品検索APIを叩き、render json: @itemsとし、
Vue側でaxiosを使って受け取りitemsに格納して、検索結果を表示させたいのですが、
なぜか検索結果のjsonデータではなく、htmlファイルを受け取ってしまいます。
どの部分を修正すれば、APIを叩いた結果がVueに渡されるようになるのか、助言を頂けますと幸いです。

Ruby: 2.7.2
Rails: 6.0.3.4
Vue: 2.6.12
axios: 0.21.1
webpack-dev-server: 3.11.1

期待している動き

①vueのapp/javascript/pages/items/index.vueで「タオル」で検索すると、@click="exec"メソッドが発動。
②vueのparamsのkeywordに「タオル」が格納され、同時にaxiosでRailsのsearchメソッドを呼ぶ。そのときにvueのparamsの「タオル」が、Railsのメソッド内のparamsに格納された状態で、APIを叩く。
③返ってきたデータを@itemsに代入し、それをJSONでrenderし、vueのitemsに格納させる。

該当のソースコード

routes.rb

ruby
1Rails.application.routes.draw do
2  root 'home#index'
3  namespace :api, {format: 'json'} do
4    namespace :v1 do
5      resources :rakuten_searches, only: [:search] do
6        collection do
7          get 'search'
8        end
9      end
10    end
11  end
12  get '*path', to: 'home#index'
13end
14

app/controllers/api/v1/rakuten_searches_controller.rb

ruby
1class Api::V1::RakutenSearchesController < ApplicationController
2  RakutenWebService.configure do |config|
3    config.application_id = XXXXXXXXXXXXXXXXXX
4  end
5
6  def search
7    @items = RakutenWebService::Ichiba::Item.search(keyword: params[:keyword] ,giftFlag: 1)
8
9    render json: @items
10  end
11end
12

app/views/api/v1/rakuten_searches/search.json.jbuilder

ruby
1json.array!@items

app/javascript/pages/items/index.vue

vue
1<template>
2  <div>
3    <div class="input-group">
4      <input v-model="keyword" placeholder="キーワードで検索">
5      <button type="submit" @click="exec">検索</button></span>
6    </div>
7    <div>
8      <div v-for="item in items" :id="item.id">
9        <div>
10          {{item.itemName}}
11        </div>
12      </div>
13    </div>
14  </div>
15</template>
16
17<script>
18  export default {
19  name: "ItemsIndex",
20    data() {
21      return{
22        items: [],
23        keyword: '',
24      }
25    },
26    methods: {
27      exec() {
28        this.$axios.get('/api/v1/rakuten_searches/search',{
29          params: {
30            keyword: this.keyword,
31          },
32        })
33        .then(response => {
34          this.items = response.data;
35        })
36      }
37    }
38  };
39</script>
40
41<style scoped>
42</style>
43

試したこと

例えば「タオル」で検索すると、レスポンスは下記のようになります。

ここでitemsに格納されているものをよく見ると、下記のファイルのようでした。
app/vue/home/index.html.erb

ruby
1<head>
2 <%= javascript_pack_tag 'hello_vue' %>
3</head>
4<body>
5  <div id="app">
6    <router-view></router-view>
7  </div>
8</body>
9

試しに、検索窓に直接`http://localhost:3000/api/v1/rakuten_searches/search`と入力すると、下記のようにエラーになります。

試しに、コントローラで`params`で受け取るのではなく直接`keyword: 'タオル'`とし、検索窓に直接`http://localhost:3000/api/v1/rakuten_searches/search`と入力すると、ちゃんと`JSON`で表示されます。

app/controllers/api/v1/rakuten_searches_controller.rb

ruby
1class Api::V1::RakutenSearchesController < ApplicationController
2  RakutenWebService.configure do |config|
3    config.application_id = XXXXXXXXXXXXXXXXXX
4  end
5
6  def search
7    @items = RakutenWebService::Ichiba::Item.search(keyword: 'タオル' ,giftFlag: 1)
8
9    render json: @items
10  end
11end
12