Vue.jsでinputに入力した文字列が表示されない

Question

前提・実現したいこと

書籍に記載されているソースコードを利用したハンズオンで、Vue.jsの学習中です。
本来であれば、inputフォームに入力した文字列が表示されるはずが、フォーム内に一切表示されません。
選択しているというカーソル表示は出るのですが、何を打ち込んでも文字が表示されないのです。
入力内容をフォーム内に表示させ、かつ検索結果に反映させたいのですが、どこが誤りなのでしょうか？
下記にデベロッパーツール上に出ているエラーメッセージを記載します。

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

[Vue warn]: Property or method "keyword" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <BookSearch> at src/views/BookSearch.vue
       <App> at src/App.vue
         <Root>

[Vue warn]: Property or method "books" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <BookSearch> at src/views/BookSearch.vue
       <App> at src/App.vue
         <Root>

該当のソースコード

<template>
<div id="search">
  <!-- 検索フォームを定義 -->
  <el-form :inline="true">
    <el-form-item label="キーワード">
      <el-input type="text" size="large" v-model="keyword"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onclick">検索</el-button>
    </el-form-item>
  </el-form>
  <hr>
  <!-- マッチした書籍情報をリスト表示 -->
  <BookInfo v-for="(b, i) of books" :linkable="true" :book="b" :index="i + 1" :key="b.isbn"></BookInfo>
</div>
</template>

<script>
import BookInfo from '../components/BookInfo.vue';

export default {
  name: 'book-search',
  // ローカルコンポーネントを登録
  components: {
    BookInfo
  },
  date() {
    return {
      keyword: 'vuejs', // 検索キーワード
      books: [] // 検索結果
    }
  },
  methods: {
    // [検索]ボタンで書籍情報を検索
    onclick: function() {
      this.$http('https://www.googleapis.com/books/v1/volumes?q=' + this.keyword)
      // 応答データをJSONデータとして取得
      .then((response) => {
        return response.json()
      })
      // JSON文字列の内容をbooksプロパティ（配列）に詰め替え
      .then((data) => {
        this.books = []
        for (let b of data.items) {
          let authors = b.volumeInfo.authors
          let price = b.saleInfo.listPrice
          let img = b.volumeInfo.imageLinks
          this.books.push({
            id: b.id, // id値
            title: b.volumeInfo.title, // 書名
            author: authors ? authors.join(',') : '', // 著者
            price: price ? price.amount : '-', // 価格
            publisher: b.volumeInfo.publisher, // 出版社
            published: b.volumeInfo.publishedDate, // 刊行日
            image: img ? img.smallThumbnail : '', // 表紙画像
          })
        }
      })
    }
  }
}
</script>

試したこと

https://teratail.com/questions/124265
Reactになりますが、上記を参考にスペルミスは確認したつもりです。
見逃しがあるようでしたら教えていただきたいです。

また、エラーメッセージから、keywordとBooksの定義がなされていないことは把握できたのですが、利用している書籍の最新の正誤表（最新更新：2021年11月11日）には記載がありませんでした。

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

vue：2.6.14
vue cli：4.5.15

ハンズオンとして使用している書籍は「これからはじめるVue.js実践入門」になります。

Answer 1

写し間違えでないのなら、ここですかね。

  date() {
    return {
      keyword: 'vuejs', // 検索キーワード
      books: [] // 検索結果
    }
  },

vueではdataを定義すると、this.data.xxxで参照できるようになるわけですが、
上記のコードはスペルミスをしていますね。
誤：date
正：data

Comments

[退会済みユーザー]

ありがとうございます！

ちょうど今見返していてそこに気付いて修正したところ、無事に反映されるようになりました。
確認くださってありがとうございます。
data、個人的に間違えやすいので気をつけます。