Big from with steps

Hello team, I need your advice.

I am have big form with few steps.

1. user enter plate number. Using ajax and 3part service, I am getting all details about the vehicle. When user select's that this is his vehicle, I am saving data to db. (returning back ad_id to form)

2. User selects all his car features. Using ajax I am saving data in to db

3. User fills his sales information like phone and so on. Using ajax I am saving data in to db

4. User uploads his pictures (using dropzone)

5. final check -> form submit

Problem: With Vue I am beginner so my code is so mixed with jquery. I can't pass ad_id to my laravel controller from dropzone url. because it is generated before I am geting this id. (ID geting in end of first step) always ad_id comes null. how to do that?

What are possible solutions to solve this problem?

1. Save id in session (what possible errors can be?)
2. Move dropzone code to vue (don't have experience to do that)
3. Split from step 5 differient forms. (what you think about it?)
4. any other???

<div v-show="ad_id" id="image-upload" class="dropzone"></div>

        <!-- Ad_id Form Input -->
        <div class="form-group{{ $errors->has('ad_id') ? ' has-error' : '' }}">
                <label for="ad_id">Ad_id</label>
                <input type="text" class="form-control" name="ad_id" id="ad_id" v-              model="ad_id" placeholder="Ad_id">
                @if ($errors->has('ad_id'))
                        <span class="help-block">
                            <strong>{{ $errors->first('ad_id') }}</strong>
                        </span>
                @endif
        </div>

 $(document).ready(function() {
            // Disable the auto init. So we can modify settings first. We will manually initialize it later.
            Dropzone.autoDiscover = false;

            // imageUpload portion is the camelized version of our HTML elements ID. ie
            // <div id="image-upload"> becomes imageUpload.
            Dropzone.options.imageUpload = {
                paramName: "file", // The name that will be used to transfer the file
                maxFilesize: 5, // MB
                parallelUploads: 2, //limits number of files processed to reduce stress on server
                addRemoveLinks: true,
                accept: function(file, done) {
                    // TODO: Image upload validation

                    done();
                },
                sending: function(file, xhr, formData) {
                    // Pass token. You can use the same method to pass any other values as well such as a id to associate the image with for example.
                    formData.append("_token", $('[name=_token').val() ); // Laravel expect the token post value to be named _token by default
                },
                init: function() {
                    this.on("success", function(file, response) {
                        // On successful upload do whatever :-)
                    });
                }
            };

            // Manually init dropzone on our element.
            var myDropzone = new Dropzone("#image-upload", {
                url: '/account/ad/create/upload',
                params: { ad_id : $('#ad_id').val()}
                //  params: { ad_id : 1}
            });

        });


        Vue.directive('init', {
            bind: function (el, binding, vnode) {
                vnode.context[binding.arg] = binding.value;
            }
        });
        Vue.use(VeeValidate);
        new Vue({
            el: '#content',
            data: function () {
                return {
                    plate_number: '',
                    vehicle: null,
                    status: false,
                    mileage: '',
                    price: '',
                    post_code: '',
                    title: '',
                    description: '',
                    phone: '',
                    email: '',
                    formSubmitted: false,
                    ad_id: '',
                    vechile_id: '',
                    error: 0,
                }

            },
            methods: {
                feachPlateNumber: function () {

                    var resource = this.$resource('../../api/dvla/');
                    $("#status, #preloader").fadeIn();
                    resource.get({plate: this.plate_number}).then(function (vehicle) {
                        this.vehicle = [];
                        this.status = vehicle.ok;
                        this.vehicle = vehicle.body;
                        $("#status, #preloader").fadeOut();
                    });
                },

                createAd: function () {
                    //console.log(this.vehicle);

                    var resource = this.$resource('../../ad/create/step1');
                    $("#status, #preloader").fadeIn();
                    resource.get({vechile: this.vehicle}).then(function (data) {

                        if (data.body['error'] == 1) {
                            this.error = data.body['error'];
                            $(window).scrollTop(0);
                        } else {
                            this.ad_id = data.body['ad_id'];
                            this.vechile_id = data.body['vechile_id'];
                            this.step2();

                        }
                        //   this.vehicle = [];
                        //  this.status = vehicle.ok;
                        //  this.vehicle = vehicle.body;
                    });
                    $("#status, #preloader").fadeOut();

                },
                step2: function () {


                    // save car details
                    // features
                    $('#step1').removeClass('active').addClass('completed');
                    $('#progress').attr('data-appear-progress-animation', '25%').css('width', '25%');
                    $('#step2').tab('show');
                    $(window).scrollTop(0);
                },
                step3: function () {
                    $('#step2').removeClass('active').addClass('completed');
                    $('#progress').attr('data-appear-progress-animation', '50%').css('width', '50%');
                    $('#step3 ').tab('show');
                    $(window).scrollTop(0);
                },
                step4: function () {
                    $('#step3').removeClass('active').addClass('completed');
                    $('#progress').attr('data-appear-progress-animation', '75%').css('width', '75%');
                    $('#step4 ').tab('show');
                    $(window).scrollTop(0);
                },

                step5: function () {
                    $('#step4').removeClass('active').addClass('completed');
                    $('#progress').attr('data-appear-progress-animation', '100%').css('width', '100%');
                    $('#step5 ').tab('show');
                    $(window).scrollTop(0);
                },
                validateBeforeSubmit: function (e) {
                    this.$validator.validateAll();

                    if (this.errors.any()) {
                        e.preventDefault();
                    }
                },
                submitForm: function () {
                    this.formSubmitted = true
                },

            }
        });