Таблица с данными, но без нумерации страниц в vue js

Question

Мой код не отображает нумерацию страниц при получении данных из базы данных. В чем может быть проблема

<table class="paginated">
    <thead>
        <tr>
            <th scope="col">A</th>
            <th scope="col">B</th>  
            <th scope="col">C</th> 
         </tr>
    </thead>
    <tbody>
        <tr v-for="product in products">
        <td height="40">{{product.product_name}}</td>
        <td height="40">{{product.product_category}}</td>
        <td height="40">{{product.amount}}</td>
        </tr>
  </tbody>
</table>
<script type="text/javascript">
    var appVM= new Vue({
     el:'#productPageVM',
     data:{
         id:'',
        product_name:'',
        product_category:'',
        amount:'',
        products:Array(),
        rowData:{}

     },
     created:function(){
     this.getProductList(); 
     },
     methods:{
         getProductList:function(){
             axios.get("/product/list",
             ).then(function(response){
                 this.products=response.data;
             }.bind(this))
         },

Код сценария нумерации страниц

<script type="text/javascript">
 $(function() {
      $('table.paginated').each(function() {
        var currentPage = 0;
        var numPerPage = 10;
        var $table = $(this);
        $table.bind('repaginate', function() {
          $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
        });
        $table.trigger('repaginate');
        var numRows = $table.find('tbody tr').length;
        var numPages = Math.ceil(numRows / numPerPage);
        var $pager = $('<div class="pager"></div>');
        var $previous = $('<span class="previous"><<</span>');
        var $next = $('<span class="next">>></span>');
        for (var page = 0; page < numPages; page++) {
          $('<span class="page-number"></span>').text(page + 1).bind('click', {
            newPage: page
          }, function(event) {
            currentPage = event.data['newPage'];
            $table.trigger('repaginate');
            $(this).addClass('active').siblings().removeClass('active');
          }).appendTo($pager).addClass('clickable');
        }

pager $ pager.insertAfter ($ table) .find ('span.page-number: first'). AddClass ('active'); $ Previous.insertBefore ( 'span.page номер: первый'); $ next.insertAfter ('span.page-number: last');

        $next.click(function(e) {
          $previous.addClass('clickable');
          $pager.find('.active').next('.page-number.clickable').click();
        });
        $previous.click(function(e) {
          $next.addClass('clickable');
          $pager.find('.active').prev('.page-number.clickable').click();
        });
        $table.on('repaginate', function() {
          $next.addClass('clickable');
          $previous.addClass('clickable');
            setTimeout(function() {
            var $active = $pager.find('.page-number.active');
            if ($active.next('.page-number.clickable').length === 0) {
              $next.removeClass('clickable');
            } else if ($active.prev('.page-number.clickable').length === 0) {
              $previous.removeClass('clickable');
            }
          });
        });
        $table.trigger('repaginate');
      });
    });
  </script>

как мне решить эту проблему