Removing classes after 2 seconds. How to fix the error?

Question

JavaScript

Hello. Help me please. I want to implement the class deletion code for menu tags every two seconds, but unfortunately my code does not work. Please tell me what is wrong.

<ul class="header_navmenu">
            <li class="nav_menu-item" 
            v-for="menu_item in menuItems"
            :class="{ opacity_deactivated: menu_item.isActive }">
            <a v-bind:href="menu_item.url" target="_blank">{{ menu_item.name }}</a></li>
          </ul>

var app = new Vue({
  el: '.header_navmenu',
  data:{
    menuItems:[
        {
          url:'#',
          name:'Блог',
          isActive: true
        },
        {
          url:'#',
          name:'Обо мне',
          isActive: true
        },
        {
          url:'#',
          name:'Навыки',
          isActive: true
        },
        {
          url:'#',
          name:'Блог',
          isActive: true
        },
        {
          url:'#',
          name:'Услуги',
          isActive: true
        },
        {
          url:'#',
          name:'Портфолио',
          isActive: true
        },
        {
          url:'#',
          name:'Контакты',
          isActive: true
        }
    ]
  },
    mounted(){
    var leng_items = this.menuItems.length;
    console.log(leng_items);
    for(var i = 0; i<= leng_items;i++){
      setTimeout(()=>{
        this.menuItems[i].isActive = false;
        console.log(this.menuItems[i])
      },2000 * (i+1))
  }}

  })

Answer 1

for (var i = 0; i < leng_items; i++) {
  setTimeout((i) => {
    this.menuItems[i].isActive = false;
  }, 2000 * (i + 1), i); 
}

Answer 2

since you turn it off for all li, isn't it better to put isActive in data, that is

data: { 
  isMenuItemActive: true,  
  //...ниже menuItems
},

mounted() {
    setTimeout(() => {
        this.isMenuItemActive = false;
    }, 2000); 
}

in template

:class="{ opacity_deactivated: isMenuItemActive }">