form_withに入力された検索ワードを元に取得したJsonデータをVueで表示できない

やりたいこと

米国の特許の検索システムのAPIを利用し、フォームに検索ワードを入力すると該当の申請者が申請した特許情報が一覧で出てくるシステムを作りたいです。
rails側でAPIからデータを取得し、Vueで表示させたいです。

困っている点

検索ワードの入力フォームを現在、form_wothで作っています。（下記views/homes/index.htm.erb）
しかし、検索ワードを入力してsubmitボタンを押しても結果が返ってきません。下記の「app/controllers/api/v1/employees_controller.rb」の中では「word = params[:search]」で取得し、「"searchText":"firstNamedApplicant:(#{word})",」という形でapiへのリクエストに組み込んでいます。

しかし一方で、「"searchText":"firstNamedApplicant:(#{word})",」の部分を例えば「"searchText":"firstNamedApplicant:(#{google})",」というように検索ワードを明示すると、一覧データが取得できます。（これはフォームで検索ワードを送信するとかではなく、トップページ（http://localhost:3000/）にアクセスした段階ですでに一覧情報が取得されています。）

そもそもフォームで入力された検索ワードがparamsに渡っていないのか？と思うのですが、Vueなしでrailsだけで実装した場合はこれで表示できていたので原因がわからず困っております。
form_withを使用して実装ができるのか、Vueでは他のやり方が必要なのか、どの点が改善点か、ご教示いただけますと幸いです。
※また、qiitaの記事を参考にして動いたものを改造して試しているため、コントローラ名など若干不自然な部分があるかと思います。（これを参考につくっていました）

環境

MacOS 11.2.3
ruby 2.7.1
rails 6.0.3.5
Webpacker 4.0
Vue 2.6.12

views/homes/index.htm.erb

<%= form_with url: root_path, method: :get, local: true do |f| %>
  <%= f.text_field :search %>
  <%= f.submit 'Search', name: nil%>
<% end %>


<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

app/javascript/packs/hello_vue.js

import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

  console.log(app)
})

app/javascript/app.vue

<template>

  <div id="app">
    <table>
      <tbody>
        <tr>
          <th>PatentNumber</th>
          <th>patentTitle</th>
          <th>FirstNamedApplicant</th>
        </tr>
        <tr v-for="e in res_data">
          <td>{{ e["patentNumber"] }}</td>
          <td>{{ e["patentTitle"] }}</td>
          <td>{{ e["firstNamedApplicant"] }}</td>
        </tr>
      </tbody>
    </table>
  </div>

</template>


<script>
import axios from 'axios';

export default {
  data: function () {
    return {
      res_data: []
    }
  },
  mounted () {
    axios
      .get('/api/v1/employees.json')
      .then(response => (this.res_data = response.data))
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

app/controllers/api/v1/employees_controller.rb

class Api::V1::EmployeesController < ApiController

  rescue_from ActiveRecord::RecordNotFound do |exception|
    render json: { error: '404 not found' }, status: 404
  end

  def index

    uri = URI.parse("https://ped.uspto.gov/api/queries")
    http = Net::HTTP.new(uri.host, uri.port)
    http.use_ssl = uri.scheme === "https"
    word = params[:search]
    a_params = {
      "searchText":"firstNamedApplicant:(#{word})",
      "fq":["appStatus:\"Patented Case\""],
      "fl":"*",
      "mm":"100%",
      "df":"patentTitle",
      "qf":"appEarlyPubNumber applId appLocation appType appStatus_txt appConfrNumber appCustNumber appGrpArtNumber appCls appSubCls appEntityStatus_txt patentNumber patentTitle primaryInventor firstNamedApplicant appExamName appExamPrefrdName appAttrDockNumber appPCTNumber appIntlPubNumber wipoEarlyPubNumber pctAppType firstInventorFile appClsSubCls rankAndInventorsList",
      "facet":"false",
      "sort":"applId asc",
      "start":"0"
    }
    headers = { "Content-Type" => "application/json" }
    response = http.post(uri.path, a_params.to_json, headers)
    @J_data = JSON.parse(response.body)
    res_data = @J_data["queryResults"]["searchResponse"]["response"]["docs"]

    render json: res_data

  end

end