Pagination add numbers

Hi. I have this pagination got a fiddle from other site

<template>
  <nav class="pagination">
      <a class="pagination-previous" @click="paginate('previous')" :disabled="start <= 0">Previous</a>
      <a class="pagination-next" @click="paginate('next')" :disabled="limit >= total">Next page</a>
  </nav>
</template>

<script>
    export default {
        data() {
            return {
                total: 16,
                pagination: 2,
                start: 0,
                limit: 2
            }
        },
        computed: {
            filtered: function(){
                return this.items.slice(this.start, this.limit)
            }
        },
        mounted: function() {
            this.limit = parseInt(this.pagination);
        },
        
        methods: {
            paginate: function(direction) {
                if(direction === 'next') {
                    this.start += parseInt(this.pagination);
                    this.limit += parseInt(this.pagination);
                }
                else if(direction === 'previous') {
                    this.limit -= parseInt(this.pagination);
                    this.start -= parseInt(this.pagination);
                }
            }
        }
    }
</script>

But I want to implement this the numbers and ellipses.

<ul class="pagination-list">
    <li>
      <a class="pagination-link">1</a>
    </li>
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li>
      <a class="pagination-link">45</a>
    </li>
    <li>
      <a class="pagination-link is-current">46</a>
    </li>
    <li>
      <a class="pagination-link">47</a>
    </li>
    <li>
      <span class="pagination-ellipsis">&hellip;</span>
    </li>
    <li>
      <a class="pagination-link">86</a>
    </li>
  </ul>

I'm not sure how I can do it. Can you guys help me? Thanks!