Note: This article assumes that you already understand the basic of Vue Component. If not, please do read the Vue component documentation first. The ref attribute is our last shot to manipulate DOM if any other way can't be used. Some of explanations of ref attribute are also listed under Handling Edge Cases section on Vue documentation.
And it also stated that we have to avoid manipulating DOM elements directly as best as we can.
So, please check thoroughly if you want to use ref feature in Vue.
It doesn't mean we can't use that feature. It is just as a reminder that we have to make sure it will be worked as our expected.
We have a Vue component as follow:. It has an input which ref attribute is set and a paragraph containing data binding.
Let say we want to make the input focused programmatically.
We can do that by calling $refs.input.focus().