[151] Error when use vuejs with vuefire, firebase: The client-side rendered virtual DOM tree is not matching server-rendered content

hi everyone, when use firebase with vuefire normally, it will show error: index.vue:

<template>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Cover</th>
                <th>Title</th>
                <th>Author</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="book in books">
                <td><img v-bind:src="book.imageUrl" v-bind:alt="book.title" height="150" width="100" /></td>
                <td>{{ book.title }}</td>
                <td>{{ book.author }}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>
    import Vue from 'vue';
    import VueFire from 'vuefire';
    import Firebase from 'firebase';

    Vue.use(VueFire);

    let app = null;
    if (Firebase.apps.length > 0)
        app = Firebase.app();
    else
        app = Firebase.initializeApp({
            apiKey: "AIzaSyBRdKK4mC-oYtSZj3g3UraiYjv4h3_E_yc",
            authDomain: "books-2af20.firebaseapp.com",
            databaseURL: "https://books-2af20.firebaseio.com",
            storageBucket: "books-2af20.appspot.com",
            messagingSenderId: "129775003419"
        });

    const db = app.database();
    const booksRef = db.ref('books');

    let result = {
        firebase: {
            books: booksRef
        },
    }
    

    export default result;

</script>