How to expose wrapped <input> in Vue?
<p>I'm trying to create a reusable styled input field in Vue. To make it styled (e.g. with an icon inside) I need to wrap it in another html-element.</p>

<p>Lets call the example below <code>StyledInput</code></p>

<pre><code>&lt;div class="hasIcon"&gt;
    &lt;input /&gt;
    &lt;i class="someIcon"&gt;&lt;/i&gt;
&lt;div&gt;
</code></pre>

<p>If I want to use <code>StyledInput</code> it might look like so:</p>

<pre><code>&lt;styled-input @keyup.enter="doSomething"&gt;
&lt;/styled-input&gt;
</code></pre>

<p>But this would not work, due to the event listener being attached to the <code>&lt;div&gt;</code> instead of the <code>&lt;input&gt;</code>.</p>

<p>A workaround to that could be to emit all key-events from the input field:</p>

<pre><code>&lt;div class="hasIcon"&gt;
    &lt;input @keyup="$emit('keyup', $event) /&gt;
    &lt;i class="someIcon"&gt;&lt;/i&gt;
&lt;div&gt;
</code></pre>

<p>But this will not scale well since it would have to be rewritten every time a developer uses an unmapped prop or event.</p>

<p>Is there a way to only make the inner element exposed to whomever uses it?</p>