DOM manipulation through VanillaJS in VueJS Framework

Question

I've started using VueJS a month ago. I've watched many tutorials to learn the language, but generally I never see developers using the DOM methods such as getElementById or getElementByClassName to make manipulations onto an element that is inside of a component or inside a view. I'd like to give an example to make my statement more clear. For example lets suppose that we have a nested component called UsernameInput that is an input[type="text"]. Instead of having to pass the value through the @input directive, we could get the value from the parent using the document.getElementById(/* Id Of The Input /*).value . I know that Vue uses the Virtual DOM for the rendering to make it faster. But does using VanillaJS affect it in any sort of way? And why is it so rarely used in front-end frameworks