title: Vue.js - Remove verbose bootstrap Input field code with component or similar
body: <p>In a single file component with pug template I have many input fields with identical formatting, such as:</p>
  
  <pre><code> .input-group.input-group-sm
       .input-group-addon Purchase Price
        input.form-control(v-model='purchase_price')
  
    .input-group.input-group-sm
      .input-group-addon Net Rental Income
      input.form-control(v-model='rental_income_net')
  </code></pre>
  
  <p>All input fields have data properties that are modified with v-model within the component.</p>
  
  <p>I would like to produce the same formatting and output, yet somehow extract the bootstrap field boilerplate and just be able to write something simple like:</p>
  
  <pre><code>cell(title='Purchase Price' v-model='purchase_price') 
  cell(title='Net Rental Income' v-model='rental_income_net') 
  </code></pre>
  
  <p>The above doesnt work and input fields don’t seem to accept slots. Also, I don’t want to have to write verbose event listeners, just have tidy code similar to the above.</p>
  
  <p>Is that possible?</p>