Vueでの動的なフォームについて

Question

前提・実現したいこと

Vue3を勉強中です。
動的なフォームを作成する時の実装方法について質問です。

例えば、項目の「その他」を選んだ時にのみ入力欄を追加で出してそのデータも送信するというフォームを作成するとします。
非Vueの通常フォームではその他が含まれていない時に入力欄をdisabledにして送信することで入力欄の送信は行われません。
Vueではv-if入力欄自体の表示非表示の切り替えは容易ですが、送信するのはフォーム用に作成したデータプロパティのオブジェクトのため「その他」の選択に関わらず入力欄のデータも送信されてしまいます。

Laravelのinertia.jsを使用しているので、素のVueとは違う部分もあると思います。
いくつか思いついた方法を試してみたのですが、どれも良い方法と思えなかったので良い方法がありましたら教えて頂けますと幸いです。

試した方法

①送信時に送信用オブジェクト組み立て
データプロパティに個別に項目を1つずつ作り、送信時に一時的に送信したい項目の送信用オブジェクトを作成
→実現自体は出来るがフォームの項目が増えれば増えるほどデータプロパティの数が増えるので良くない気がしました

②共通項目のみをデータプロパティのオブジェクトに用意しておき、条件に合わせて項目を後から追加する
データプロパティにformというオブジェクトを作り、送信時に条件に合わせてformオブジェクトに項目を追加
→サンプルコードに近い形ではありますが、送信後にも条件依存の項目が残り続けてしまう

③watchで条件に合わせて選択項目の部分を空に
formオブジェクトに最初からすべての項目を用意しておき、「その他」の状態に合わせて入力欄の中身を空に
→未入力として送信されてしまう

補足情報（FW/ツールのバージョンなど）

Laravel8
Inertia.js
Vue3

Comments

[FKM]

算出プロパティで紐付けてみたらどうでしょうか？
あと、できれば該当部分のソース提示お願いします。