Vue.js зациклить список

Есть список навигации который вывожу

<ul class=" nav-list__list"
       @scroll.passive ="handleScroll">
     <li class="nav-list__item-container"
         v-for="(item, index) in list"
         :key="index+1 "
         @mouseover="onHover(index)"
         @mouseout="isItemHovered = false; isItemsHover = false "
         :class="{'hover': isItemHovered === index, 'items-hover':isItemsHover  }"
     >
       <router-link :to="{path:item.path}">
         <div class="nav-list__item nav-list__item_visible">
           <p>{{ item.title }}</p> <span>{{ item.index  }}</span>
         </div>
         <div class="nav-list__item nav-list__item_hidden">
           <p>{{ item.title }}</p> <span>{{ item.index }}</span>
         </div>
       </router-link>
     </li>
   </ul>

 data() {
   return {
elem: null,
     list: [
       {
         title: 'Название1',
         index: '1',
         path: 'путь'
       },
       {

         title: 'Название2',
         index: '2',
         path: '/путь 2'
       },
       {

         title: 'Название3',
         index: '3',
         path: '/'
       },
       {

         title: 'Название 4',
         index: '4',
         path: '/путь3'
       },
     ],
    
 methods: {
   onHover(index) {
     this.isItemHovered = index;
     this.isItemsHover = true;
   },
   handleScroll() {
   let scrollPos  = e.target.scrollTop

     if (scrollPos  <= 3) {
       this.list.unshift(
         this.list[this.list.length -1]
         )

     } else if(scrollPos >60 ) {
       this.list.push(
           this.list[0]
       )
     }
   }

 },  
mounted() {
 this.elem = document.querySelector('.nav-list__item');

 },}

пробовал менять массив путем добавления элемента в начало или конец массива, отслеживая положения первого элемента в списке, но это мягко говоря не верно помогите зациклить этот список в виде карусели при скроле ?