Post Axios return, update form child component variables

I’m trying to post to an ecommerce gateway that only accept POST requests. My backend is Laravel and I have some essential gateway parameters that I provide via Axios to the front-end. Some of these parameters include the form destination for POSTing, and also the order details.

The essence of the problem is after my Axios call the form (which is a child component), never gets updated.

It’s essential that I do an Axios call before submitting the form, because the gateway might be in test mode and depending on the mode the form action (URL) changes.

Here is the top of my form:

<form ref="form"
              id="myForm"
              @submit="checkForm"
              method="post" :action="gateway.destination">

            <input type="hidden" name="_token" :value="csrf">
            <input type="hidden" name="order_id" ref="order_id">
            <input type="hidden" name="payment_method" ref="payment_method">

            <payfast-component
                    v-if="payment_method ==='payfast'"
                    :key="componentKey"
                    :gateway="gateway"
                    :user="user"
                    :order="order">
            </payfast-component>

Here is how the form is put together before sending it for a POST and the Axios call:


const formData = new FormData(this.$refs['form']); // reference to form element
                const form = {}; // need to convert it before using not with XMLHttpRequest
                for (let [key, val] of formData.entries()) {
                    Object.assign(form, {[key]: val})
                }

                let data = {
                    cart: this.$store.state,
                    form: form,
                };

                axios.post('/api/v1/order', data).then(res => {
                    eventListener = false;
                    this.order = res.data.data.order;
                    this.gateway = res.data.data.gateway;
                    // Clear the cart
                    window.localStorage.setItem('cartItems', '');
                    window.localStorage.setItem('cartCount', '');
                    // Set order_id hidden value
                    this.$refs.order_id.value = this.order.id;
                    // Submit the form
                    this.$refs.form.submit();
                    this.disableSubmitButton = false;

Some of the things I’ve tried:

                    this.$forceUpdate();
                    this.componentKey += 1;
                    eventBus.$emit('updatePayfastForm', this.gateway);

The line this.gateway = res.data.data.gateway; is supposed to be reactive on the child component, but it’s just not working. If I abort the form post, then this.gateway functions as it should.