Vue v-for: итерация одного элемента индивидуально в массиве

var firstComponent = Vue.component('spans-show', {
  template: `
<h1>
	<span class = "unset">Make</span>
	<br>
	<span class = "unset">Something</span>
    <br>
	<span v-for = "(span, index) of spans" :class = "{ 'is-active': span.isActive, 'red': span.isRed, 'first': span.isFirst }" :key = "index">{{ index }}: {{ span.name }}</span>
</h1>
`,

  data() {
    return {
      spans: [
        {
          name: 'Magical.',
          isActive: true,
          isRed: true,
          isFirst: true
        },
        {
          name: 'Inspiring.',
          isActive: false,
          isRed: true,
          isFirst: true
        },
        {
          name: 'Awesome.',
          isActive: false,
          isRed: true,
          isFirst: true
        }
      ]
    };
  },

  methods: {
    showMe: function() {
      setInterval(() => {
        // forEach
        this.spans.forEach(el => {
          if (el.isActive) {
            el.isActive = false;
          } else {
            el.isActive = true;
          }
        });
      }, 3000);
    }
  },

  created() {
    window.addEventListener('load', this.showMe);
  },

  destroyed() {
    window.removeEventListener('load', this.showMe);
  }
});

var secondComponent = Vue.component('span-show', {
  template: `
<span v-show = "isActive"><slot></slot></span>
`,

  props: {
    name: {
      required: true
    }
  },

  data() {
    return {
      isActive: false
    };
  }
});

new Vue({

  el: "#app",
  components: {
    "first-component": firstComponent,
    "second-component": secondComponent
  }
});

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.wrapper {
  position: relative;
  margin: 0 auto;
  width: 100%;
  padding: 0 40px;
}

h1 {
  font-size: 48px;
  line-height: 105%;
  color: #4c2c72;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: archia-semibold, serif;
  font-weight: 400;
  margin: 0;
  height: 230px;
}

span {
  position: absolute;
  clip: rect(0, 0, 300px, 0);
}

span.unset {
  clip: unset;
}

span.red {
  color: #e43f6f;
}

span.is-active {
  clip: rect(0, 900px, 300px, -300px);
}

<div id = "app">
  <div class = "container">
    <div class = "wrapper">
      <spans-show>
        <span-show></span-show>
      </spans-show>
    </div>
  </div>
</div>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>