Vue + Vuetify submitting form with GET method passes empty values - vue.js

Question

I have a problem with my code. I can't find a reason why my GET parameters are empty when the form is submitted.
What I'm trying to achieve is to submit the form after validation and be redirected to http://someurl.com/?service=3&propert_type=2. Is it even possible? Or do I need to stringify it and then use window.location?
I'm a newbie at Vue, but can't find the internet for a solution so I guess it's something to do with my code.
<template>
<ValidationObserver v-slot="{ valid }" ref="getanoffer">
<v-form
class="form form--getanoffer"
ref="form"
>
<ValidationProvider
rules="required"
v-slot="{ errors }"
name="service"
>
<v-select
v-model="service"
name="service"
:items="services"
placeholder="Select Service"
:error-messages="errors"
solo
></v-select>
</ValidationProvider>
<ValidationProvider
rules="required"
v-slot="{ errors }"
name="property_type"
>
<v-select
v-model="property_type"
:items="property_types"
name="property_types"
item-text="name"
item-value="id"
placeholder="Select Property Type"
:error-messages="errors"
solo
></v-select>
</ValidationProvider>
<v-btn
color="primary"
width="100%"
#click="validate"
class="v-btn--submit v-btn--no-gutter"
:loading="loading"
:disabled=" ! valid"
>
Continue
</v-btn>
</v-form>
</ValidationObserver>
</template>
<script>
import {ValidationProvider, ValidationObserver} from "vee-validate";
export default {
components: {
ValidationProvider,
ValidationObserver,
},
data() {
return {
service: null,
property_type: null,
form: {
},
loading: false,
}
},
props: {
services: {
type: Array,
},
property_types: {
type: Array,
}
},
methods: {
async validate() {
let form = await this.$refs.getanoffer.validate();
if (form) {
this.loading = true;
this.submit();
this.$refs.form.$el.submit();
}
},
submit() {
}
}
}
</script>

Answer 1

Lets simplify your code
Instead of calling validate() on button click, you can add type="submit" to your button and in your form you can add #submit:prevent="validate". This doesn't solve the problem but allows you to submit with Enter and every submit button will trigger the validation.
Now for the solution
1- To navigate to external scope you can use windows.open(). Vuetify lets you navigate to an url but you had to put href on your button and control it manually
windows.open('http://someurl.com/')
CodePen
Vuetify vee-validate docs
Javacript standards say that you should use camelCase for js variables (this.propertyType)
JS standard
ESlint Rules