what's the real purpose of 'ref' attribute?

The main purpose of the ref attribute is to make the DOM element selectable by being the key in the parent $refs attribute.

For example your input element there, with ref="input", would expose its DOM node in its parent (here inside currency-input this), as this.$refs["input"] (or this.$refs.input).

See: https://vuejs.org/v2/api/#ref

It has several use cases, even if it would be often better when possible to not manipulate the DOM directly. For example, a legitimate use case here is to put focus on this input: for that you can use this.$refs["input"].focus() in a method of the component...

• $refs is used to select/target HTML elements
• $refs is like the document.querySelector('.el') in vanilla JS or $('.el') in jQuery
• $refs can be accessed inside or outside your VueJS instance.
• $refs are NOT REACTIVE unlike data properties.

Thus, it is recommended to use $refs when you want to listen/manipulate/change the value of an element that doesn't connected/controlled to any Vue instance properties to avoid conflicts.