How to bind the input field with vuejs by using template
<p>I am a new at <a href="http://vuejs.org/" rel="nofollow">Vuejs</a></p>

<p>In the below code I have used 2 instances of template , now I want to calculate the final outcome.I have tried but it didn't work. If anyone know then please help me.</p>

<p><strong>html</strong></p>

<pre><code>&lt;pre&gt;

&lt;template id="input-template"&gt;

    &lt;label for="{{name}}"&gt;{{label | capitalize}}&lt;/label&gt;
    &lt;input type="text" id="{{name}}" class="form-control" name="{{name}}" v-model="name"/&gt;

&lt;/template&gt;

&lt;form &gt;
    &lt;input_box label="quantity" name="quantity" &gt;&lt;/input_box&gt;
    &lt;input_box label="price" name="price" &gt;&lt;/input_box&gt;
  {{totalprice}}
&lt;/form&gt;
</code></pre>

<p><strong>js</strong></p>

<pre><code>&lt;script&gt;
new Vue({
    el:'body',
    data:{
        message:'Hello world '
    },
    components:{
        input_box:{
            template:'#input-template',
            props:['name','label'],
            data:function(){
                return {name:''};
            },
            computed:{
                totalprice:function(){
                    return this.price * this.quantity;
                }

            }
        }
    }
});
&lt;/script&gt;
&lt;/pre&gt;
</code></pre>