<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Allows you to create a scoped block of HTML without having to create a component (similar to petite-vue).</p>
<p dir="auto">This has already been mentioned <a href="https://github.com/vuejs/vue/issues/12212" data-hovercard-type="issue" data-hovercard-url="/vuejs/vue/issues/12212/hovercard">here</a>. However after searching for the issue/PR for hours I still cannot find it.</p>
<p dir="auto">Please could you either keep this issue, re-open the original issue or add a comment which atleast links to the issue/pr.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div v-scope=&quot;{ count: 0 }&quot;&gt;
  {{ count }}
  &lt;button @click=&quot;count++&quot;&gt;inc&lt;/button&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div v-scope="{ count: 0 }"&gt;
  {{ count }}
  &lt;button @click="count++"&gt;inc&lt;/button&gt;
&lt;/div&gt;
</code></pre></div>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!-- somewhere in a component named 'tl-login' --&gt;
&lt;div v-text=&quot;str(me)&quot;&gt;"><pre class="notranslate"><span class="pl-c">&lt;!-- somewhere in a component named 'tl-login' --&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">v-text</span>="<span class="pl-s">str(me)</span>"<span class="pl-kos">&gt;</span></pre></div>
<div class="highlight highlight-source-coffee notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Vue = require 'vue'

Vue.component 'login',
  template: '#tl-login'
  data: {}
  methods:
    str: (x) -&gt;
      JSON.stringify x"><pre class="notranslate"><span class="pl-v">Vue</span> <span class="pl-k">=</span> <span class="pl-c1">require</span> <span class="pl-s"><span class="pl-pds">'</span>vue<span class="pl-pds">'</span></span>

<span class="pl-smi">Vue</span>.<span class="pl-en">component</span> <span class="pl-s"><span class="pl-pds">'</span>login<span class="pl-pds">'</span></span>,
  <span class="pl-v">template</span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#tl-login<span class="pl-pds">'</span></span>
  <span class="pl-v">data</span><span class="pl-k">:</span> {}
  <span class="pl-v">methods</span><span class="pl-k">:</span>
    <span class="pl-en">str</span><span class="pl-k">:</span> (<span class="pl-smi">x</span>) <span class="pl-k">-&gt;</span>
      <span class="pl-c1">JSON</span>.<span class="pl-en">stringify</span> x</pre></div>
<p dir="auto">But as it began to run, <code class="notranslate">this.str</code> is <code class="notranslate">undefined</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="(function() {
this.str;this.$parent.me;return  this.str(this.$parent.me)
})"><pre class="notranslate"><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">str</span><span class="pl-kos">;</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$parent</span><span class="pl-kos">.</span><span class="pl-c1">me</span><span class="pl-kos">;</span><span class="pl-k">return</span>  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">str</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$parent</span><span class="pl-kos">.</span><span class="pl-c1">me</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Code(before compilation) can be found at <a href="https://github.com/jiyinyiyong/meal-ordering">https://github.com/jiyinyiyong/meal-ordering</a><br>
The code running online: <a href="http://repo.tiye.me/meal-ordering/" rel="nofollow">http://repo.tiye.me/meal-ordering/</a></p>
<p dir="auto">This usage is not in the docs but talked at: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="34151930" data-permission-text="Title is private" data-url="https://github.com/vuejs/Discussion/issues/29" data-hovercard-type="issue" data-hovercard-url="/vuejs/Discussion/issues/29/hovercard" href="https://github.com/vuejs/Discussion/issues/29">vuejs/Discussion#29</a></p>