Scrolling messages in Vue for rippleitin.nz

Sample.vue

<template>
  <div>
    <div class="scroller">
      <span class="message">{{ message }}&nbsp;</span> <!-- Forced space to reserve height -->
      <span class="cursor" v-html="cursor"></span>
    </div>

    <h4>Messages</h4>
    <ul>
      <li v-for="m in messages" v-bind:key="m">{{ m }} <button @click="removeMessage(m)" v-if="messages.length > 1">&times;</button></li>
      <li>Add message: <input type="text" v-model="newMessage" /><button @click="addMessage">Add</button></li>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        newMessage: '',
        message: '',
        cursor: '',
        messages: [
          'Hi',
          'Just testing',
          'This is native Vue'
        ]
      }
    },
    methods: {
      removeMessage (message) {
        this.messages.splice(this.messages.indexOf(message), 1)
      },
      addMessage () {
        if (this.newMessage.trim() !== '') {
          this.messages.push(this.newMessage)
          this.newMessage = ''
        }
      },
      scrollText () {
        setInterval(() => {
          this.cursor = this.cursor === '|' ? '' : '|'
        }, 200)
        let iteration = 0
        let interval
        const run = () => {
          if (iteration > this.messages.length - 1) iteration = 0
          this.message = ''
          interval = setInterval(() => {
            this.message = this.messages[iteration].slice(0, this.message.length + 1)
            if (this.message.length === this.messages[iteration].length) {
              clearInterval(interval)
              iteration++              
              setTimeout(run, 1500) // 1 sec and next
            }
          }, 50) // 1 char every .2 sec
        }
        run()
      }
    },
    mounted () {
      this.scrollText()
    }
  }
</script>

<style>
  div.scroller { font-family: Arial, sans-serif; }
  span.cursor { color: #999; font-weight: bold; }
</style>