axios POSTの際に指定したURLに遷移せずGETでURLが返ってくる。

[実現したい事]
Vue3コンポーネントで作成したformをaxios経由でLaravel DBへ保存.。
location.hrefで指定のURLに遷移。

[問題]
axiosからのPOSTはされているが指定したURLに遷移しない。
Laravel DBへ保存はできている。

POST後のURLが以下の様にaxiosPOSTに持たせた値がURLに付与されている。
という事から、axios POSTの後にGETで「http://127.0.0.1:1180/api/api/images」にリクエストされている。と考えています。

http://127.0.0.1:1180/api/api/images?image=&text=aaa&title=sa&comment=sasa

[理解できていない点]
●axios .postに遷移先のURLを指定しているのですが、ページ遷移しない。
●POSTでリクエストしている。（はず）。なぜPOST後にGETでリクエストが返ってくるのか?
●ブレークポイントを以下の箇所にしかけて、処理を進めると指定のURLに遷移する

        .then((res) => {
          console.log("success");
          location.href = "http://127.0.0.1:1180/mypost";　//ここにブレークポイントを仕掛けるとコンソールに"success"表示される。　href=""のURLにも遷移する
        })

なぜブレークポイント確認しながらだと指定のURLに遷移されるのか。
●コンポーネント内の<v-form></v-form>タグを消すと、POST後に指定のURLへ遷移する。
しかし、<v-form></v-form>でバリテーションを仕掛けているので<v-form></v-form>は使いたい。

<v-form>タグが悪さしているのかな？と考えているのですが、ではどうすれば良いのかわかりません。

解決にむけてアイデアがありましたら教えてください。
コンポーネントは以下の様に書いています。

Vue
1<template>
2<v-form>
3  <div>
4    <!-- <input type="hidden" name="_token" :value="csrf" /> -->
5    <!-- 画像エリア -->
6    <div id="image_area">
7      <canvas class="mx-auto my-2" ref="preview" id="preview" style="width:300px; width:100%"></canvas>
8      <input
9        class="mb-3"
10        type="file"
11        name="image"
12        accept="image/*"
13        ref="selectImage"
14        style="width:300px;"
15        @change="previewImage"
16      />
17    </div>
18    <v-field
19    class="mb-3"
20      v-model="text"
21      name="text"
22      type="text"
23      id="canvas_text"
24      :rules="textRequired"
25    ></v-field>
26    <button
27      id="drawText"
28      type="button"
29      @click="drawText('preview', 'canvas_text')"
30    >
31      文字を描く
32    </button>
33    <p class="text-danger"><error-message name="text"></error-message></p>
34    <!-- タイトル入力 -->
35    <div>
36      <v-field
37        class="mb-3"
38        id="title"
39        v-model="title"
40        name="title"
41        type="text"
42        placeholder="タイトル"
43        :rules="titleRequired"
44      ></v-field>
45      <p class="text-danger"><error-message name="title"></error-message></p>
46    </div>
47    <!-- コメント入力エリア -->
48    <div>
49      <v-field
50        class="mb-3"
51        id="comment"
52        as="textarea"
53        v-model="comment"
54        name="comment"
55        cols="30"
56        rows="10"
57        placeholder="コメント入力"
58        :rules="commentRequired"
59      ></v-field>
60      <p class="text-danger">
61        <error-message name="comment"></error-message>
62      </p>
63    </div>
64    <button
65      id="saveCanvas"
66      @click="
67        saveCanvas('preview');
68      "
69       @submit="onSubmit"
70    >
71      <i class="fab fa-twitter mb-3">Twitter</i>
72    </button>
73  </div>
74</v-form>
75</template>
76<script>
77import * as VeeValidate from "vee-validate";
78import { Form, Field, ErrorMessage } from "vee-validate";
79import { ref, selectImage, preview } from "vue";
80
81export default {
82  components: {
83    VForm: VeeValidate.Form,
84    VField: VeeValidate.Field,
85    ErrorMessage: VeeValidate.ErrorMessage,
86  },
87
88  setup() {
89    //////////canvasの画像をinput type="file"にプレビュー//////////
90    const selectImage = ref();
91    const preview = ref();
92    let previewImage = () => {
93      let file = selectImage.value.files; //ファイル情報の取得
94      console.log(file);
95      const canvas = preview.value; //canvasタグ
96      const fileReader = new FileReader();
97      console.log(file);
98      fileReader.onload = function () {
99        const ctx = canvas.getContext("2d");
100        const image = new Image();
101        image.src = fileReader.result;
102        image.onload = function () {
103          canvas.width = image.width;
104          canvas.height = image.height;
105          ctx.drawImage(image, 0, 0);
106        };
107      };
108      fileReader.readAsDataURL(file[0]);
109    };
110
111    //////////キャンバスに文字を描く//////////
112    let drawText = (canvas_id, text_id) => {
113      const canvas = preview.value;
114      const ctx = canvas.getContext("2d");
115      const text = document.getElementById(text_id);
116      //文字のスタイルを指定
117      ctx.font = "32px serif";
118      ctx.fillStyle = "#404040";
119      //文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
120      ctx.textBaseline = "center";
121      ctx.textAlign = "center";
122      //座標を指定して文字を描く（座標は画像の中心に）
123      const x = canvas.width / 2;
124      const y = canvas.height / 2;
125      ctx.fillText(text.value, x, y);
126    };
127
128    //////////Canvasのデータをblob化/title/commentをaxiosでPOST//////////
129    let saveCanvas = (canvas_id) => {
130      const type = "image/png";
131      const canvas = document.getElementById(canvas_id);
132      const dataurl = canvas.toDataURL("image/jpeg", 0.85);
133      const bin = atob(dataurl.split(",")[1]);
134      const buffer = new Uint8Array(bin.length);
135      for (let i = 0; i < bin.length; i++) {
136        buffer[i] = bin.charCodeAt(i);
137      }
138
139      const blob = new Blob([buffer.buffer], { type: type });
140
141      //new FormData() を作成
142      const data = new FormData();
143      data.append("canvas", blob, "image/png");
144      data.append("title", title.value);
145      data.append("comment", comment.value);
146
147      axios
148        .post("/api/images", data, {
149          headers: { "content-type": "multipart/form-data" },
150        })
151        .then((res) => {
152          console.log("success");
153          location.href = "http://127.0.0.1:1180/mypost";
154
155        })
156        .catch((error) => {
157          new Error(error);
158        });
159    };
160
161    //////////バリテーションルール////////////
162
163    //テキストバリテーション
164    let textRequired = (value) => {
165      if (!value) {
166        return "テキストは必須項目です";
167      } else if (value.length > 30) {
168        return "30文字以内で入力してください。";
169      }
170      return true;
171    };
172    //タイトルバリテーション
173    let titleRequired = (value) => {
174      if (!value) {
175        return "タイトルは必須項目です";
176      } else if (value.length > 30) {
177        return "30文字以内で入力してください。";
178      }
179      return true;
180    };
181
182    //コメントバリテーション
183    let commentRequired = (value) => {
184      if (!value) {
185        return "コメントは必須項目です";
186      } else if (value.length > 255) {
187        return "255文字以内で入力してください。";
188      }
189      return true;
190    };
191
192    return {
193      text: "",
194      title: "",
195      comment: "",
196      previewImage,
197      selectImage,
198      preview,
199      drawText,
200      saveCanvas,
201      textRequired,
202      titleRequired,
203      commentRequired,
204      csrf: document
205        .querySelector('meta[name="csrf-token"]')
206        .getAttribute("content"),
207    };
208  },
209

上記コード以下の箇所でaxios POSTの処理を書いていいます。

      //new FormData() を作成
      const data = new FormData();
      data.append("canvas", blob, "image/png");
      data.append("title", title.value);
      data.append("comment", comment.value);

      axios
        .post("/api/images", data, {
          headers: { "content-type": "multipart/form-data" },
        })
        .then((res) => {
          console.log("success");
          location.href = "http://127.0.0.1:1180/mypost";

        })
        .catch((error) => {
          new Error(error);
        });