vue pagination component with events

vue pagination

<pagination :pag="pagination"
            @prev="getUsers(...arguments)"
            @next="getUsers(...arguments)">
</pagination>

<template>
    <div id="pagination" class="row justify-content-md-center">
        <nav aria-label="Page navigation">
            <ul class="pagination pagination" v-if="this.pag.count > 0">
                <li class="page-item" v-if="this.pag.current_page > 1">
                    <a v-if="this.pag.current_page > 1" @click.prevent="$emit('prev', 1)" class="page-link"  href="#" aria-label="Previous">
                        <span aria-hidden="true"> <i class="fa fa-angle-left"></i> </span>
                        <span class="sr-only">Previous</span>
                    </a>
                </li>
                <li v-for="page in pag.total_pages" :class="{ 'active' : page == pag.current_page }" class="page-item">
                    <a class="page-link" @click.prevent="$emit('prev', page)" href="#">
                        {{ page }}
                    </a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#" v-if="this.pag.current_page < this.pag.total_pages" @click.prevent="$emit('next', pag.total_pages)" aria-label="Next">
                        <span aria-hidden="true"> <i class="fa fa-angle-right"></i> </span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
    export default {
        name: 'pagination',
        props: ['pag']
    }
</script>