Vue gives us a lot of powerful features when it comes to manipulating the DOM. It simplifies the job of maintaining states, to creating UIs which are easy to maintain, and fun to use. One thing Vue does really well is removing the need for direct DOM manipulation. Sometimes, though, we still need to manipulate or reference DOM elements themselves. Fortunately, Vue has thought of this and allows us to do this with the ref attribute.
Referencing DOM Elements in Vue
Although it's certainly possible to use .querySelector() on a Vue document, it's not best practice. If we want to reference a DOM element, we can use the ref attribute in Vue.