JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="(message, index) in messages">
      <input :id="'item-'+index" type="text" v-model="message" style="width:80%;">
    </li>
    <li v-if="msg">{{msg}}</li>
  </ul>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    messages: [
      'Hello Vue!',
      'Hello Vuex!',
      'Hello VueRouter!'
    ],
    msg: null
  },
  mounted () {
  	document.getElementById('item-1').focus()
  	setTimeout(() => {
    	this.messages.unshift('Focus moves!')
    }, 2000)
  	setTimeout(() => {
    	this.messages.unshift('Moves again...')
      this.msg = `I suppose this happens because of the way DOM is updated and I understand there must a good reason for this. However I need to avoid this behaviour. How can I do this?`
    }, 4000)
  }
})