<script type="text/x-template" id="traffic-light">
  <div class="traffic-light" :class="{active: isGreen}"></div>
</script>

<div id="app">
  <traffic-light />
</div>

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.traffic-light {
  width: 4vw;
  height: 4vw;
  border-radius: 100%;
  background-color: red;
  
  &.active {
    background-color: green;
  }
}

Vue.component('traffic-light', {
  template: '#traffic-light',
  name: 'TrafficLight',
  data () {
    return {
      isGreen: false,
      interval: null
    }
  },
  created () {
    this.interval = setInterval(() => {
      this.isGreen = !this.isGreen
    }, 5 * 1000)
  },
  beforeDestroy () {
    clearInterval(this.interval)
  }
})

let app = new Vue({
  el: '#app'
})