Nuxt.js でaxisosを用いたデータの取得方法

前提・実現したいこと

現在、RailsAPIモード + Nuxt.js + GoogleBooksAPIで書籍を検索して登録するアプリを作成しています。
Nuxt.jsのaxiosで本の情報を取得→Railsで本の情報を登録
としたいのですが、axiosでGoogleBooksAPIから本情報を取得できませんでした

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

Nuxt
1<template>
2  <div>
3    <input v-model="keyword" type="text">
4    <v-btn @click="get">
5      検索ボタン
6    </v-btn>
7    <p>検索結果を表示</p>
8    <li v-for="book in books" :key="book.id">
9      <p>{{  book.volumeInfo.id }}</p>
10      <p>{{  book.volumeInfo.title }}</p>
11    </li>
12  </div>
13</template>
14<script>
15export default {
16  data () {
17    return {
18      books: [],
19      error: false,
20      keyword: ''
21    }
22  },
23
24  methods: {
25    get () {
26      const url = 'https://www.googleapis.com/books/v1/volumes?q='
27      this.$axios(url + this.keyword + '&maxResults=20')
28        .then(this.setBooks).catch(this.setError)
29    },
30    // APIリクエスト後の処理
31    setBooks (res) {
32      this.books = res.items
33    },
34    setError (err) {
35      console.log(err)
36      this.error = true
37    }
38
39  }
40}
41</script>
42