JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <div class="col-sm-6 col-md-4" id="app">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">
                    {{ stock.name }}
                    <small>(Price: {{ stock.price }})</small>
                </h3>
            </div>
            <div class="panel-body">
                <div class="pull-left">
                    <input type="number" class="form-control" placeholder="Quantity" v-model="quantity"/>
                </div>
                <div class="pull-right">
                    <button class="btn btn-success" @click="buyStock">Buy</button>
                </div>
            </div>
        </div>
    </div>

JavaScript

var $myApp = {	
    'el':'#app',
    'data':{
        "quantity": 0,
        "stock": {
        	"id": 0,
          "name": "foo",
          "price": 123
        }
    },
     "methods":{
     
         'buyStock' : function()
         {
             const order = {
                    stockId: this.stock.id,
                    stockPrice: this.stock.price,
                    quantity: this.quantity
                };
                console.log(order);
                this.quantity = 0;
         }
     }
}

new Vue($myApp);