Vue - using refs to focus an element target

Wrap the focus event in a nextTick - this will defer the focus event until the DOM has updated and displayed the input.

var myApp = new Vue({  el: '#app',  data: {    onEdit: false,    msg: 'Something in here',  },  methods: {    switchAndFocus() {      if(!this.onEdit) {       this.onEdit = true;       this.$nextTick(function(){        this.$refs.afterClick.focus();       });      }    },  },});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script><div id="app">  <span class="before-click" @click="switchAndFocus()" v-show="!onEdit">{{msg}}</span>  <input type="text" class="after-click" ref="afterClick" :value="msg" v-show="onEdit"></div>

Expand snippet