tanatiyo 以下、作業用メモです。
実務のなかで、知らずにやってしまっていたことなので、メモ_φ(･_･
親コンポーネントから子コンポーネントに渡されたpropは直接変更されるべきではない
【理由】
propsは親コンポーネントから子コンポーネントに渡されるデータであり、親コンポーネントが管理するもの。
propsを子コンポーネントで直接変更すると、データフローが予測不能になり、アプリケーションのメンテナンスやデバッグが困難になる。
また、propsの変更は一方向のデータバイディングの原則に違反する可能性がある。
子コンポーネントでpropsの値を変更する必要がある場合には
プロジェクトによって以下の方法を検討する。
- ローカルなデータの使用：子コンポーネント内でローカルなデータを定義し、それを変更する。この場合には、親コンポーネントから渡されたpropsを初期値として使用することができるが、その後はローカルなデータとして扱う。
- イベントを発火して通知する：子コンポーネントが変更されたことを親コンポーネントに通知するために、カスタムイベントを発火する。親コンポーネントでは、このイベントをキャッチして、必要な処理を実行する。
- Vuexなどの状態管理ライブラリの使用：大規模なアプリケーションでは、Vuexなどの状態管理ライブラリを使用して、アプリケーション全体の状態を一元管理している。この場合、子コンポーネントは状態を直接変更するのではなく、ストア内のデータを変更する。
上記、対応したことがあるのは２のみ。
１と３の方法も一度試してみたいです。
v-modelをv-bindとv-onの組み合わせに変更
実際の変更点として、v-modelを使用して、直接propsの中身を変更してしまっていたので、ここをv-bindでpropsのデータを渡し（子コンポーネントに）、v-onで子コンポーネントのイベントを検知して（入力操作や変更状態など）親コンポーネントにデータを渡すように変更しました。