Submit時に非同期処理を実行しつつ、HTMLformのsubmitで送信する方法

前提・実現したいこと

（例）Railsのform_withのSubmit時、確認アラートを表示し（この時点ではページ遷移なし）、「次へ」を押すことによってページ遷移するような仕組みを作ろうとしています。
フロントはVue.jsを導入し、アラートはSweetAlertを使っています（非同期のフォームライブラリ）

発生している問題・エラーメッセージ

このフォームをを送信し遷移した後、ブラウザバックをした時に、フォームの内容がブラウザキャッシュにより残っている状態を実現したいと思っているのですが、javascript内でform.Submit()することが原因で、ブラウザキャッシュが効かない状態で困っております。
参考URL：https://liliel.hateblo.jp/entry/2020/10/27/165657

該当のソースコード

html.haml
1#root
2 = form_with url: test_path, id: 'customForm', local: true do |form|
3  = form.text_field :text
4  = form.submit '確認画面へ', '@click.prevent': 'customAlert()'

var vm = new Vue({
    el: '#root',
    methods: {
      customAlert: function(e) {
        const form = $("#customForm");
　　　　　// 何らかの処理
　　　　　// ・・・
        // ポップアップを出力
        swal.fire({
          title: '確認ポップアップです',
          text: '次へをクリックすると遷移します',
          confirmButtonText: '次へ',
          showCancelButton: true,
          cancelButtonText: 'キャンセル',
        })
        .then((result) => {
          if (result.isConfirmed) {
            form.submit();
          } else {
            return false;
          };
        });
      },
    }

試したこと

解決の糸口として、下記が思いつきました。

① form.Submit()でなく、SubmitEvent()を発生させる
② 該当のformに、複数のSubmitボタンを配置し（片方はdisplay:none）、一つ目のクリックアクションでポップアップ表示ロジックを発火させ、同ロジック内でもう一つの非表示になっているボタンのsubmitを発火させる

①については、form.Submit()の代わりに、Rails.fireを用いることにより、SubmitEventを発生させようと試みましたが、下記エラーを解決できませんでした。

vue.js:1897 TypeError: obj.dispatchEvent is not a function
    at Object.Rails.fire (rails-ujs.source.js:155)
    at Vue.customAlert (new?id=xxxx:8342)
    at click (eval at createFunction (vue.js:11628), <anonymous>:3:2225)
    at invokeWithErrorHandling (vue.js:1863)
    at HTMLInputElement.invoker (vue.js:2188)
    at HTMLInputElement.original._wrapper (vue.js:7541)

②については、試したところできそうではありましたが、綺麗ではないのでなるべく避けたいと思っています。
これら以外に、Submit時に非同期のポップアップを表示させつつ、ブラウザキャッシュが残るような形でページ遷移する方法があれば、ぜひご教示いただきたいです。