[Vuejs]-Vue.js element reference on attribute

This isn’t possible the way you’re asking for it.

• The way that Vue works with VNodes, the element won’t exist the first time you try to evaluate disabled: Vue evaluates the properties to determine how the DOM should look and then creates the elements to match. As here:
  

  Note that you can only access the ref after the component is mounted. If you try to access input in a template expression, it will be null on the first render. This is because the element doesn’t exist until after the first render!

• With async components, the attributes will need to have well-defined values even if there isn’t a Component to render yet, let alone well-defined elements to position there.
• With fragment components, there won’t ever be a single HTML element to interact with, because the component represents multiple top-level HTML elements.

Events don’t have to play by the same rules, because you’re defining handlers: DOM events will come from one source and apply to one target, and absent components don’t emit events. Even then, the syntax gives you access to $event, not to an $el for a direct element reference.

The most straightforward way is to use a ref to get to the object after Vue creates it, subject to the same null-on-first-render ref rules above. If you need to pass a handle into a multipurpose method in the shape of getFoo(argument) your argument may have to be a string or enum key you define, not the element itself.