Why my function doesn't work when checkbox with v-for vue js?

I want to Drag and drop sorting of table rows in priority order.

When checkbox checked will be moved into this div class :

<div class="table-test">
    <ul>
        {{-- for checkbox checked --}}
    </ul>
</div>

My html with static checkbox.

<div class="test__list__checkbox checkbox-test">
<ul>
    <li>
        <div class="form--checkbox__wrapper">
            <span class="priority"></span>
            <input type="checkbox" id="checkbox-11" class="checkbox--input">
            <label for="checkbox-11" class="checkbox--label">Mandarin Test</label>
        </div>  
    </li>
    <li>
        <div class="form--checkbox__wrapper">
            <span class="priority"></span>
            <input type="checkbox" id="checkbox-12" class="checkbox--input">
            <label for="checkbox-12" class="checkbox--label">Accounting Test</label>
        </div>  
    </li>
    <li>
        <div class="form--checkbox__wrapper">
            <span class="priority"></span>
            <input type="checkbox" id="checkbox-13" class="checkbox--input">
            <label for="checkbox-13" class="checkbox--label">TOEFL</label>
        </div>  
    </li>
    <li>
        <div class="form--checkbox__wrapper">
            <span class="priority"></span>
            <input type="checkbox" id="checkbox-14" class="checkbox--input">
            <label for="checkbox-14" class="checkbox--label">Color Blind Test</label>
        </div>  
    </li>
    <li>
        <div class="form--checkbox__wrapper">
            <span class="priority"></span>
            <input type="checkbox" id="checkbox-15" class="checkbox--input">
            <label for="checkbox-15" class="checkbox--label">Basic Home</label>
        </div>  
    </li>
</ul>

And this is my function

function moveCheck(){
  $(document).ready(function() {
      //Helper function to keep table row from collapsing when being sorted
      var fixHelperModified = function(e, li) {
      var $originals = li.children();
      var $helper = li.clone();

      $helper.children().each(function(index)
      {
        $(this).width($originals.eq(index).width())
      });
        return $helper;
      };

      //Make diagnosis table sortable
      $(".table-test ul").sortable({
        helper: fixHelperModified,
        stop: function(event,ui) {renumber_table('.table-test')}
      }).disableSelection();
  });

  //Renumber table rows
  function renumber_table(tableID) {
    $(tableID + " li").each(function() {
      count = $(this).parent().children().index($(this)) + 1;
      console.log(count);
      $(this).find('.priority').html(count);
    });
  }

  var checkedList = $('.table-test ul');
  var unCheckedList = $('.checkbox-test  ul');
  var checkBoxInput = $('.checkbox--input');

  $('.checkbox--input').change(
  function(){
    if (this.checked){
      $(this).closest('li').appendTo(checkedList);
      renumber_table('.table-test');
    }
    else if (!this.checked){
      $(this).closest('li').appendTo(unCheckedList);
      renumber_table('.table-test');
    }
  });
}

This is working just fine, but When I change to checkbox dynamic with v-for vue js it doesn't work, I don't know why. Like this:

<div class="test__list__checkbox checkbox-test">
<ul>
    <li v-for="test_list in dt_test_list">
        <div class="form--checkbox__wrapper">
            <span class="priority"></span>
            <input type="checkbox" id="checkbox-@{{ test_list.id }}" class="checkbox--input">
            <label for="checkbox-@{{ test_list.id }}" class="checkbox--label">@{{ test_list.type }}</label>
        </div>  
    </li>
</ul>

Anyone help me? Many thanks