How do I push items into an array in the data object in Vuejs? Vue seems not to be watching the .push() method

I am attempting to add objects into an array I declared in Vue instance data object. I can set the values in the state's purchase object, but when I push data into the orders queue array, the empty array is not populated. The function is being triggered, but the array does not update.

Here is my form:

<form v-on:submit.prevent="queuePurchase" class="form-inline row" id="order-creation-form" method="POST">
        @csrf
        <autocomplete-field sizing="col-xs-12 col-sm-3 col-md-3" name="customer" label="Customer" :data="" v-on:setcustomer="setCustomer($event)"></autocomplete-field>   

        <div class="col-xs-12 col-sm-3 col-md3 form-group d-flex flex-column align-items-start">
            <label for="phone">Product</label>
            <select v-model="purchase.product" class="form-control w-100" name="product" aria-describedby="productHelpBlock" required>
                @foreach ($products as $product)
                    <option :value=""></option>
                @endforeach
            </select>
            <small id="productHelpBlock" class="form-text text-muted">Select a product</small>
        </div>

        <div class="col-xs-12 col-sm-3 col-md-3 form-group d-flex flex-column align-items-start">
            <label for="phone">Quantity</label>
            <input v-model="purchase.quantity" type="number" min="1" name="product" class="form-control w-100" aria-describedby="productHelpBlock" required>
            <small id="productHelpBlock" class="form-text text-muted">Product quantity</small>
        </div>

        <div class="form-group">
            <button type="submit" class="btn btn-success icon-button d-flex">
                <i class="material-icons">add</i>
                <span>&nbsp;&nbsp;  Q U E U E</span>
            </button>
        </div>
    </form>

And here is my javascript:

require("./bootstrap");
window.Vue = require("vue");

Vue.component("queue-table", require('./components/QueueTable.vue'));
Vue.component("autocomplete-field", require('./components/AutocompleteField.vue'));

const purchaseApp = new Vue({
    el: "#purchase-app",

    data() {
        return {
            queue: [],
            purchase: {
                product: null,
                customer: null,
                quantity: null
            }
        }
    },

    methods: {
        setCustomer: function(customerObj) {
            this.purchase.customer = customerObj;
        },

        queuePurchase: function() {
            this.queue.push( this.purchase );
        }
    }
});

Could someone please explain what & why it is happening?

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2oRMIZc
via IFTTT