Edit in JSFiddle

new Vue({
    el: '#app',
    
    
    data: {
        itemCount: 857,
        pageNum: 1,
        perPage: 10
    },
    
    
    computed: {
        totalPages() {
                return Math.ceil(this.itemCount / this.perPage);
            },
            prevPageNumber() {
                if (this.totalPages < 2 || this.pageNum < 2)
                    return false;
                return this.pageNum - 1 || 1;
            },
            nextPageNumber() {
                let pageNum;
                if (this.totalPages < 2)
                    pageNum = 1;
                if (this.pageNum <= this.totalPages)
                    pageNum = this.pageNum + 1;
                // -- validate 
                if (pageNum > this.totalPages)
                    return false;
                return pageNum;
            },
            prevButtonClass() {
                if (this.pageNum < 2)
                    return 'disabled';
            },
            nextButtonClass() {
                if (this.pageNum >= this.totalPages)
                    return 'disabled';
            },
            pagingClass() {
                if (this.totalPages < 2)
                    return "disabledPaging";
            },
            firstItemOnPage() {
                return parseInt((this.pageNum - 1) * this.perPage + 1);
            },
            lastItemOnPage() {
                var perPage = parseInt(this.perPage);
                return ((this.pageNum - 1) * perPage) + perPage;
            }
    },
    watch: {
        totalPages() {
            if (this.totalPages === 0) {
                this.pageNum = 1;
                return;
            }
            if (this.pageNum > this.totalPages) {
                this.pageNum = this.totalPages;
            }
        }
    },
    methods: {
        nextPage() {
                if (this.pageNum >= this.totalPages)
                    return false;
                this.pageNum++;
            },
            prevPage() {
                if (this.pageNum < 2)
                    return false;
                this.pageNum--;
            }
    }
})
<div id="app">
    <p style="text-align:center">
        Show
        <input v-model="perPage" type="text"> items per Page
    </p>
    <div :class="['paging',pagingClass]">
        <a href="#" :class="['prev-button',prevButtonClass]" @click.prevent="prevPage()">Previous</a>
        <p>Page
            <select name="page" v-model="pageNum">
                <option v-for="(page,key) in totalPages" :value="page">{{ page }} </option>
            </select>
            of {{ totalPages }}</p>
        <a href="#" :class="['next-button',nextButtonClass]" @click.prevent="nextPage()">Next</a>
    </div>

    <div class="output">Show items {{ firstItemOnPage }} through {{ lastItemOnPage }}.</div>


    <br>
    <br>
    <br>
    <input type="text" v-model="itemCount"> (total items)
</div>