title: Using the ref attribute with dom element outside a VueJS 2 component template
body: <p>I am currently struggling with referencing existing DOM elements with VueJS.</p>
  
  <p>I have an existing date input rendered from the applications twig template and a separate VueJS widget i integrated.</p>
  
  <p><code>&lt;input type="time" ref="date_time_1" min="09:00" max="18:00" value="13:30"&gt;</code></p>
  
  <p>The date input field is NOT inside the components template, but within the VueJS application (having <code>id="#app"</code>).</p>
  
  <p>For data-binding i would like to use the <code>ref</code> attribute to connect the VueJS component with my date input field inside the components template (e.g. for initialization with values coming from the application):</p>
  
  <pre><code>mounted() {
    componentsTimeValue: this.$refs["date_time_1"].value;
  }
  </code></pre>
  
  <p>getting <code>undefined</code> here.</p>
  
  <p>Is there a way to connect "existing" DOM elements (that are not created with vue), with vue components using the <code>ref</code> attribute at all?</p>