Как можно автоматически добавлять и удалять класс каждые 3 секунды в Vue?

Для реализации автоматического добавления и удаления класса каждые 3 секунды в Vue можно использовать setInterval в методе mounted компонента. 

Пример кода:

Шаблон:
```html
<template>
  <div :class="{ active: isActive }">Hello World</div>
</template>
```

Стили:
```css
.active {
  color: red;
}
```

JavaScript:
```vue
<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  mounted() {
    setInterval(() => {
      this.isActive = !this.isActive
    }, 3000)
  }
}
</script>
```

Для периодической смены класса активного элемента между различными блоками в цикле каждые 3 секунды с помощью JavaScript на странице с шаблоном и стилями, нужно использовать массив элементов и индекс текущего активного элемента.

Пример кода:

Шаблон:
```html
<template>
  <div :class="{ active: item.isActive }" v-for="(item, index) in items" :key="index">
    {{ item.text }}
  </div>
</template>
```

Стили:
```css
.active {
  color: red;
}
```

JavaScript:
```vue
<script>
export default {
  data() {
    return {
      items: [
        { text: 'Item 1', isActive: true },
        { text: 'Item 2', isActive: false },
        { text: 'Item 3', isActive: false }
      ],
      activeIndex: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.items[this.activeIndex].isActive = false
      this.activeIndex = (this.activeIndex + 1) % this.items.length
      this.items[this.activeIndex].isActive = true
    }, 3000)
  }
}
</script>
``` 

В данном примере, каждые 3 секунды будет меняться активный элемент между блоками "Item 1", "Item 2" и "Item 3", применяя к ним класс "active".

const blocks = ref(Array.from({ length: 5 }, (_, i) => -~i));
const active = ref(0);

function next() {
  active.value = (active.value + 1 + blocks.value.length) % blocks.value.length;
}

let intervalId = null;
onMounted(() => intervalId = setInterval(next, 500));
onUnmounted(() => clearInterval(intervalId));
 
 
<div
  v-for="(n, i) in blocks"
  v-text="n"
  :class="[ 'box-item', { active: i === active } ]"
></div>