Работа с JSON Vue.js

Не получается вывести данные JSON с Google api books. Вот так выглядит пример что возвращает JSON https://www.googleapis.com/books/v1/volumes?q=harrypotter

Вот код основного файла main.js

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

new Vue({
    el: '#app',
    render: h => h(App)
});

вот так выглядит App.vue

<template>
    <div id = "app">
        {{ title }}
        <Book/>
    </div>
</template>
<script>
import Book from './components/Book.vue'
export default {
    name: 'app',
    data() {
        return {
            title: 'Choose book',
        }
    },
    methods: {
    },
    components: {
        Book
    }
}

Вот Book.vue

<template>
    <div id = "books">
        <div id = "book-name"><input type="text" name="" v-model = "bookName"></div>
        <div id = "book-button" @click = "fetchBook"><button>Choose book</button></div>
        <!-- {{ books }} -->
        <div class = "book" >
            <div class = "book-title">{{ books }}</div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Book',
    data() {
        return {
            bookName: '',
            books: {}
        }
    },
    methods: {
        fetchBook() {
            let book = this.bookName;
            fetch(`https://www.googleapis.com/books/v1/volumes?q=${book}`, {
                method: 'GET'
            }).then(
                response => response.json())
                .then(json => this.books = json)
        }
    }
}

Попытка сделать вот так не увеначалась успехом.

<div class = "book" v-for = "(book, index) in books">
    <div class = "book-title">{{ book.volumeInfo.title }}</div>
</div>

Мне нужно в отдельном для каждой книги вывести название, автора, дату и так далее, но пишет консоль "Cannot read property 'title' of undefined". Подскажите где ошибка и как её исправить?