title: Vue two-way binding in 'transparent' wrapped input component
body: <p>I am writing a small wrapper for a <code>&lt;input&gt;</code> component.
  I was following the documentation and this 
  <a href="https://laracasts.com/series/learn-vue-2-step-by-step/episodes/25" rel="nofollow noreferrer">tutorial</a>.</p>
  
  <p>However I am having issues with the two-way binding.
  I expect my component to work with <code>v-model</code>. The binding seems to work fine for updating the value, but when I change the value itself the component doesn't update. I've also <a href="https://zendev.com/2018/05/31/transparent-wrapper-components-in-vue.html" rel="nofollow noreferrer">read about transparent wrappers</a>, which seems to be my issue here.</p>
  
  <p>Simple example:</p>
  
  <pre><code>&lt;template id="numInput" :v-on="listeners"&gt;
    &lt;div&gt;
      &lt;!-- note the div here, it works without, but that's not what I want --&gt;
      &lt;input ref:inp type="number" :value="num" @input="updateSelf($event.target.value)" @blur="reset" :class="{rc: isNegative}" /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>You can find the whole code example <a href="https://codepen.io/luaiodu/pen/aaKdXJ" rel="nofollow noreferrer">here</a>.</p>
  
  <p>The binding works one way (modifying the text input). But the input component doesn't get updated the other way (button klick in example)</p>
  
  <p>Any help is welcome!</p>