Vue - When And Why Using $el

I've found this answer here: https://stackoverflow.com/a/50431015/11735826 and i wonder why .$el was used here, and also why does it not work without the el element?

Solution 1:

when you use ref attribute on the html tag, the DOM-element is returned by this.$refs.modal.

when you use ref attribute on the template tag, the component instance is returned, so this.$refs.modal.$el returns directly the DOM element. See https://vuejs.org/v2/api/#vm-el

Solution 2:

$el returns the HTML element to which a given Vue instance (be it a main instance or a component) is bound. By using this.$refs.modal.$el the answer gets the underlying HTML element for the this.$refs.modal, and then encapsulates it in a jQuery object to call the modal method.