How to access refs outside a VueJs template

Sometimes you need to make use of the ref attribute to access a child component in VueJs, like so:
 
```html
<input ref="someRefName"></input>
```

```js
this.$refs.someRefName
``` 

But what if you need to do the same thing for an html element that's still inside your app but outside of your VueJs template or component? Maybe you've tried it and `this.$refs.someRefName` comes in undefined.

That's when the `$root` instance comes in handy. Just add the ref attribute on the target element and access it in your VueJs component like this:
 
```js
this.$root.$refs.someRefName
```

That makes VueJs look for that reference in the root instance of your app, and not only inside your component.

Just make sure you don't overuse it. Most of the times, there's a better way to do what you need to do.

Zeno Popovici
28 Jul 2021