The ref we used on the child tag is a special attribute that we can put it on components or on elements in the page to get a reference that we can use later on in the code.
The use of ref is not reactive, for this reason you cannot bind it to a variable. Furthermore, the $refs option takes some time to be populated; we had to wait for the mounted hook to be triggered before being able to use it.
This code, for example, doesn't work:
<div id="app"> <child ref="junior"></child> <p>Truth: {{$refs.junior.stomach}}</p> </div>
The reason is that since the mustaches are evaluated in the render of the template (in this case, the HTML) and the $refs variable is populated after the said render, junior is undefined at this point ...
