Вариант выбора Vuejs отправляет форму

Я использую vuesax 4, и у меня есть варианты выбора в моей форме, но каждый раз, когда я выбираю вариант, он отправляет мою форму! как этого не допустить?

Код

HTML

<form
    class = "mt-2"
    ref = "form"
    :model = "form"
    enctype = "multipart/form-data"
>
    <vs-select
        :key = "tags.length"
        filter
        :label = "$t('posts.tags')"
        v-model = "form.tags"
        multiple
    >
        <vs-option
        v-for = "tag in tags"
        :key = "tag.id"
        :label = "tag.name"
        :value = "tag.id"
        >
        {{ tag.name }}
        </vs-option>
    </vs-select>

    <vs-button @click = "onSubmit" native-type = "submit" gradient>
        {{ $t("posts.save") }}
    </vs-button>
</form>

SCRIPT

data() {
    return {
      categories: [],
      tags: [],
      form: {
        name: "",
        slug: "",
        image: "",
        icon: "",
        body: "",
        online: "",
        template: "",
        quote: "",
        video: "",
        tags: [],
        categories: [],
        metaTags: [],
        metaDescription: "",
      },
    };
},
mounted() {
   this.fetchTags();
},
methods: {
    fetchTags() {
      axios
        .get("/api/admin/tags", {
          headers: {
            Authorization: localStorage.getItem("access_token"),
          },
        })
        .then((response) => {
          this.tags = response.data.data;
        })
        .catch(function (error) {
          console.info("error", error);
        });
    },
    onSubmit(e) {
        e.preventDefault();

        let formData = new FormData();
        formData.append("name", this.form.name);
        formData.append("slug", this.form.slug);
        formData.append("image", this.form.image);
        formData.append("icon", this.form.icon);
        formData.append("body", this.form.body);
        formData.append("online", this.form.online);
        formData.append("template", this.form.template);
        formData.append("quote", this.form.quote);
        formData.append("video", this.form.video);
        formData.append("tags", this.form.tags);
        formData.append("categories", this.form.categories);
        formData.append("metas", this.form.metaTags);
        formData.append("metas", this.form.metaDescription);

        axios
        .post("/api/admin/posts/add", formData, {
        headers: {
            Authorization: localStorage.getItem("access_token"),
        },
        })
        .then((res) => {
        this.$router.push({ name: "adminPosts" });

        this.form = {
            name: "",
            slug: "",
            image: "",
            icon: "",
            body: "",
            online: "",
            template: "",
            quote: "",
            video: "",
            tags: [],
            categories: [],
            metaTags: [],
            metaDescription: "",
        };

        const noti = this.$vs.notification({
            position: "top-right",
            color: "success",
            icon: "<i class='fas fa-check'></i>",
            title: "Done!",
            text: res.data.message,
        });
        })
        .catch((error) => {
            var errors = error.response.data;
            let errorsHtml = "<ol>";
            $.each(errors.errors, function (k, v) {
                errorsHtml += "<li>" + v + "</li>";
            });
            errorsHtml += "</ol>";
            const noti = this.$vs.notification({
                position: "top-right",
                color: "danger",
                icon: "<i class='fas fa-bug'></i>",
                title: "Oops!",
                text: errorsHtml,
            });
        });
    },
}

Есть идеи?