Snippet of code for showing an input field and focusing on it when mouseover occurs:
Template:
<span @mouseover="hoverOn('givenName')">
<input v-show="this.hovers['givenName']" ref="givenName" v-model="...
and
methods: {
hoverOn: function (name) {
this.hovers[name] = true
this.$refs[name].focus()
}, ...
The input field becomes visible, but the focus is not applied immediately. When mousing over a second time, the focus works as expected. The function parameters are correct, and the hovers array is properly declared in the data section.
This issue may be due to Vue not setting the field visible before the focus method is called.
Tried using this.$forceUpdate() between the first line and the focus lines, but it did not resolve the problem.