html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <script src="vue.js"></script>
</head>
<body>

    <div id="app">
        <div>
            <input type="text" v-on:input="findBook" placeholder="Cari Berdasarkan Title">
            <!-- <span>{{ hasiltitle }}</span><br> -->
            <!-- <span>{{ output }}</span> -->
            <!-- <span>{{ cari }}</span> -->
        </div><br>

        <!-- list buku -->
        <table border="1" v-show="tampilSemua">
            <tr v-for="book in books" :key="book.title">
                <td><img v-bind:src="book.image"width="90" height="90"></td>
                <td>{{ book.id }} <br/>
                    {{ book.title }} <br/>
                    {{ book.description }} <br/>
                    {{ book.authors }} <br/>
                    {{ book.publish_year }} <br/>
                    {{ book.price }}
                </td>
            </tr>
        </table>

        <!-- tampil detail -->
        <div v-if="!tampilSemua">
            <table v-show="!tampilSemua">
                <tr v-for="book in books" :key="book.title">
                    <!-- <td v-if="book.title === hasiltitle">Mantul</td> -->
                    <td v-if="book.title === hasiltitle"><img v-bind:src="book.image"width="90" height="90"></td>
                    <td v-if="book.title === hasiltitle">{{ book.id }} <br/>
                        {{ book.title }} <br/>
                        {{ book.description }} <br/>
                        {{ book.authors }} <br/>
                        {{ book.publish_year }} <br/>
                        {{ book.price }}
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <script src="index.js"></script>

</body>
</html>