Laravel / Vue で YouTube API を用いて検索機能を実装したい

Question

Laravel と Vue と YouTube API を連携させ、YouTube 検索機能を実装したいのですが、詰まってしまったのでお伺いしたいです。Laravel と YouTube API の連携はできているのですが、vue 側との連携ができずにいます。自分の想定としては、下記コードの 「Controller の searchVideo() の $keyword を、Vue側から編集して、検索結果を取得」するのをイメージしています。

#バージョン

PHP 7.3.26
Laravel Framework 6.20.16
vue@2.6.12

#該当のコード

##Laravel 側のコントローラー

public function searchVideo() {

        // 一部省略

        $youtube = new Google_Service_YouTube($client);

        $keyword = "";
        $params['q'] = $keyword;
        $params['type'] = 'video';
        $params['maxResults'] = 10;

        $videos = [];
        //一部省略
        return $videos;
    }

参考 http://challenge.no1s.biz/programming/php/381

##Vue側の入力フォーム

<input
          v-model="search_word"
          placeholder="検索キーワードを入力"
>
<v-btn @click="search_video(search_word)">
          検索
</n-btn>

検索処理

methods: {
    search_video (search_word) {
      axios.get("/api/searchVideo", {
        keyword: search_word
      })
      .then((res) => {
      console.log(res.data);
      });
    },
  }

data内部

data() {
    return {
      results: null,
      videos: [],
      search_word: "",
    };
  },

#現状

試しに検索フォームに「プログラミング」と入力、検索してみても明らかに関係のない動画一覧が表示されてしまいます。

#試したこと

以下のように Controller の $keyword に直接検索ワードを入れてコンソールで確認すると、該当の検索結果が返されるので、 Controller の処理は問題ないと考えています。ですので、Vue 側の記述が問題だと考えました。

$keyword = "プログラミング";

以下サイトを参考に Vue 側にも値を設定しました。

参考 : https://qiita.com/nonkapibara/items/d12d1aae0710bb6e748a

data: function() {
    return {
      results: null,
      keyword: "",
      order: "viewCount", 
      params: {
        q: "",  
        part: "snippet",
        type: "video",
        maxResults: "20", 
        key: ""
      }
    };

search_video: function() {
      this.params.q = this.keyword;
      var self = this;
      axios
        .get("/api/searchVideo", {
          params: this.params
        })
        .then(function(res) {
          self.results = res.data.items;
        })
    }

結果:特に変化なし

Controller の $keyword = "" に Vue 側から値を代入する方法がわかればすぐ解決できると思うのですが、それがわからずに詰まってしまいました。皆様のお知恵をお借りできれば幸いです。よろしくお願い致します。

Answer 1

これで解決しました。
お騒がせしました。

search_video () {
      console.log(this.keyword);
      axios.get("/api/searchVideo", {
        params: {
          keyword: this.keyword
        }
      })
      .then((res) => {
      console.log(res.data);
      });
    },
  },

Controller 内部の $keyword = "";　を以下に変更

$params ['q'] = $_GET['keyword'];