Refactoring with VueJS

<div id="currently-reading">
	<currently-reading></currently-reading>
</div>

<template id="reading-template">
  <div id="rcno-currently-reading">
    <div class="rcno-currently-reading-widget-fe">
      <div class="book-cover" title="89% completed">
          <div class="progress-bar-container">
            <img src="/src/book-cover.jpg" alt="book-cover" />
            <div class="progress-bar" style="width: 89%"></div>
          </div>
        <span>67/87</span>
      </div>
      <div class="book-progress">
        <h3 class="book-title">Book Title</h3>
        <p class="book-author">by Book Author</p>
        <p class="book-comment">{{ last_update.progress_comment }}</p>
        <div><span @click="previous">Previous</span> | <span @click="next">Next</span></div>
      </div>
    </div>
    <div class="rcno-review-coming-soon">
      <p>Revieww coming soon.</p>
    </div>
  </div>
</template>


const Events = {
    template: '#reading-template',
    data () {
        return {
            updates:     [],
            last_update: [],
            status:      '',
            current_page: '',
            num_of_pages: '',
            prev_btn:    undefined,
            next_btn:    undefined,
            length:      0,
            index:       0,
            is_loading:  true
        };
    },
    created () {
        this.fetchData();        
    },
    computed: {
        percentage: function () {
            return Math.round((this.current_page / this.num_of_pages) * 100);
        }
    },
    methods: {
        fetchData: function () {
            fetch('http://rcno.local/wp-json/rcno/v1/currently-reading').then(function(response) {
                return response.json();
            }).then(function (data) {
                this.updates     = data;
                this.last_update = data[data.length - 1];
                this.length      = data.length;
                this.index       = data.length - 1;
                this.is_loading  = false;
                this.displayItem(this.last_update); 
            }.bind(this)).catch(function(err) {
                console.log(err)
            });
        },
        previous: function () {
            this.displayItem(this.updates[--this.index])
        },
        next: function () {
            this.displayItem(this.updates[++this.index])
        },
        displayItem: function(post) {
            this.status         = post.progress_comment;
            this.current_page   = post.current_page;
            this.num_of_pages   = post.num_of_pages;
            this.prev_btn       = this.index >= 1;
            this.next_btn       = this.index !== this.length - 1;
        }
    }
};

new Vue({
    el: '#currently-reading',
    components: {
        'currently-reading': Events,
    },
});

[  
    {  
        "book_cover":"",
        "book_title":"aaaaaaaaa",
        "book_author":"aaaaaaaaaaa",
        "current_page":3,
        "num_of_pages":6,
        "progress_comment":"aaaaaaaaaaaaaaaaaa",
        "last_updated":"2018-09-02T00:44:24.225Z",
        "finished_book":0,
        "progress_index":1
    },
    {  
        "book_cover":"",
        "book_title":"aaaaaaaaa",
        "book_author":"aaaaaaaaaaa",
        "current_page":3,
        "num_of_pages":6,
        "progress_comment":"bbbbbbbbbbb",
        "last_updated":"2018-09-02T00:44:48.591Z",
        "finished_book":0,
        "progress_index":2
    },
    {  
        "book_cover":"",
        "book_title":"aaaaaaaaa",
        "book_author":"aaaaaaaaaaa",
        "current_page":3,
        "num_of_pages":6,
        "progress_comment":"cccccccccccc",
        "last_updated":"2018-09-02T00:46:58.711Z",
        "finished_book":0,
        "progress_index":3
    }
]