<p dir="auto">This is a feature request.</p>
<p dir="auto">I suggest that we can assign DOM <code class="notranslate">Node</code> to the member of <code class="notranslate">vm.$data</code> like following example.</p>
<p dir="auto">Template:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div id=&quot;bar&quot;&gt;
  &lt;div&gt;{{content}}&lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">bar</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>{{content}}<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Vue:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var node =  ...; // `DOM::Node` or `DOM::DocumentFragment`

new Vue({
  el: &quot;#bar&quot;,
  data: {
    content: node // This DOM Node will replace `{{content}}` in the above template.
  }
});"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">node</span> <span class="pl-c1">=</span>  ...<span class="pl-kos">;</span> <span class="pl-c">// `DOM::Node` or `DOM::DocumentFragment`</span>

<span class="pl-k">new</span> <span class="pl-v">Vue</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">el</span>: <span class="pl-s">"#bar"</span><span class="pl-kos">,</span>
  <span class="pl-c1">data</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">content</span>: <span class="pl-s1">node</span> <span class="pl-c">// This DOM Node will replace `{{content}}` in the above template.</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">This use-case</h2>
<p dir="auto">This proposal's use-case is when we need to insert DOM Node directly. In some case, we append the content sanitized with using <code class="notranslate">DOM::DOMParser</code> and traversing it.</p>
<p dir="auto">I've already mentioned it in issue <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="39429551" data-permission-text="Title is private" data-url="https://github.com/vuejs/vue/issues/384" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/384/hovercard" href="https://github.com/vuejs/vue/issues/384">#384</a>, but I'd like to gain access to a specific dom node without creating a child VM when not needed, very close to what <code class="notranslate">v-ref</code> do.</p>
<p dir="auto">So i've thought of something like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;canvas v-el=&quot;myCanvas&quot;&gt;&lt;/canvas&gt;"><pre class="notranslate"><code class="notranslate">&lt;canvas v-el="myCanvas"&gt;&lt;/canvas&gt;
</code></pre></div>
<p dir="auto">Then using it in parent VM like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var ctx = this.$$.myCanvas.getContext('2d');"><pre class="notranslate"><code class="notranslate">var ctx = this.$$.myCanvas.getContext('2d');
</code></pre></div>
<p dir="auto">What would be your approach in this use case? Is <code class="notranslate">$$</code> appropriated?</p>
<p dir="auto">Here is a <a href="https://github.com/rayfranco/vue-el">directive I made</a> that do the trick. Please tell me what you think.</p>