Set Focus Or Auto Focus Input Control Using Inserted And Directive Not Working In Vue.js 3

Hello,

Given the input element with an autofocus directive that on page load, this control get's focused right away.

<input v-autofocus :class="{ 'error' : empname.length > 22 }" />

The code to automatically focus the control is shown below using the inserted() method.

directives:{ 
	autofocus: {
	  inserted(el){ 
		el.focus();
	  }
	}
}

For some reasons the code above does not work in Vue.js 3x. After reading the docs, the solution that work was to use mounted() function instead of inserted() method if you're using Vue.js 3x.

directives:{ 
	autofocus: {
	  mounted(el){ 
		  el.focus();
	  }
	}
}

Cheers!