Develop Reference

Vue.js element reference on attribute

I have the following code:
<input type="text"
#input="disableField($event.target)"
:disabled="isFieldDisabled(????)"
/>
I want to pass to the isFieldDisabled method the same value which I get in $event.target - the element reference. I cannot find the way how to do this. I know that I could use the :ref but in this case I need to do it as shown above.
This is only the example use case. I know that to disable the field I can do it better but I want to show the problem in simplest way.

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.

How can I make my JS variables refer dynamically to DOM elements instead of simply saving their properties

I have a large table of <div>s on a page which get updated via JS all the time. Now I am writing a Chrome Extension to read these updates. At some point I'll have to refer to these <div> elements and their innerHTML. For some reasons, I'd rather save this whole table into one simple array, and then later update the array with the innerHTML of its elements. So I assign
savedElement = document.getElementById("ID1"); and later use console.log(savedElement.innerHtml);, However, the output is always the initiated value of the original Dom element, and never changes.
I know, when assigning a new object to a variable, the properties of the object are all copied to the variable, and future references to that variable will not output different values not matter how many times the actual DOM element has been changed.
Now, How can I save these DOM elements into my JS variables in a way that does not just keep those variables in their initiated state, but rather changes dynamically every time the DOM element is called through the variable?
console.log (dElement.innerHtml); // output Hello World
wait (3000); // this element "Obj1" is changed in the meanthile
console.log (dElement.innerHtml); // output Hello World
The problem is, as the above shows, the value of Obj1 doesn't change even if its value has been modified on the DOM itself. This output must also be synced.
Not: please let me know how to save a DOM element into a variable in a way that its innerHTML keeps updating and not just showing the initiated value.

Is there a way to force Vue to create empty attribute with "v-bind:" if it's bound to empty value?

I'm using vee-validate. It must have value attribute to validate it. But if I'll bind it like this: :value="formdata[name]"then it works only when the string value inside is not empty. But it is empty initially. In run-time that value attribute is absent. I can do it like this value="" and change the value with my custom js functions but I wonder if there is another way.

Optionally pass data to child element via directive

I have a popup dialog box that I wish to display one of two slightly different views, dependant on whether I have data present or not.
Is there a way in which I can optionally pass in said data within the directives?
ie. I would like to use something like
<my-comp *ngIf="ifPopup" [data]="myData" [isNew]="isNew"></my-comp>
where the [data] may not always be present, ie. It may either be undefined or have actual data present.
I just want to avoid having to basically duplicate my component.
Update after confusion around my question
Basically I am adding a new record to my DB (imagine adding a new customer etc). My component will either be used to edit a record or create a new record. If I am editing a record, myData will be filled with this record. If I am creating a new record, myData will be undefined..

why don't you just use
<my-comp *ngIf="ifPopup && myData" [data]="myData"></my-comp>
in this way, If the myData is not present, your popup wont display

Or you can also use <ng-container> and wrap your component inside and and use ngIf for your data!

The template cannot be rendered by Object in vue.js

In this demo, (https://jsfiddle.net/ccforward/fa35a2cc/) I cannot render the template and the data resultWrong equals {}
In this demo, (https://jsfiddle.net/ccforward/zoo6xzck/), if I use a temporary variable to save the async data ,then I can get the result and render the template
If I add another function named as getRightData() in the methods, then the getWrongData() can work and the template can be rendered.
link: https://jsfiddle.net/ccforward/7f42owpc/4/
If I delete the getRightData() method, then the getWrongData() cannot work.
link: https://jsfiddle.net/ccforward/7f42owpc/3/

Vue cannot detect properties that are added dynamically to an object unless you add them using set.
Here is your first fiddle updated to properly add properties to an empty object using this.$set.
For your demos, the first does not work because you add the properties using an index and Vue doesn't know that it needs to update the DOM.
The second demo works because the base value, resultRight, is set to a completely different value. resultRight is a reactive value and when it changes to a different value, Vue is aware that it needs to update the DOM.
The third demo appears to work, but it only works because resultRight changes, and because it is reactive, Vue knows to update the DOM. resultWrong is rendered at the same time but only because Vue rendered it based on the change in resultRight.
The fourth demo fails for the same reason the first demo failed. resultWrong gets new properties, but Vue doesn't know about those properties. And because you are not changing the object reference (as when you change resultRight to tmp), Vue doesn't have any idea it needs to update the DOM.