What is the usage of ref in Vue.js?

The ref if an attribute that is used to access a component directly. Despite having the props and events, if you want to access a child component directly, you can assign a reference ID to the child component using the ref attribute.

Example:

Now you can use this.$refs.usernameInput where we have to define this ref in the component.

You should avoid accessing $refs from within templates or computed properties because $refs are only populated after the component has been rendered, and they are not reactive.