子コンポーネント内の処理を実行して、別の子コンポーネントを更新したい

Question

vue初心者ですがよろしくお願いいたします。

構成

vue.jsとtypescriptを用いてwebアプリを開発しております。 またルーティングには"vue-router"を使用しています。

現状、問題のファイルは下記の構成となっております。
親ファイル（views）
├　子コンポーネント1（検索処理）
└　子コンポーネント2（データ表示部分）
画面構成は親ファイルに子1の検索フォームと子2のデータ表示部が存在している状態です。

想定する動作説明

1. 親ファイルに遷移した時点で子2はAPIを実行して必要な全データを取得し表示
2. 子1の検索処理を行うと結果を親ファイルのパスにクエリパラメータを追加し、遷移
3. 子2のに含むAPIはクエリパラメーターに含む値を元にデータを絞り込み表示

問題点

現状、上記の動作説明で”１”は出来ていますが、２と３が正しく動いていないように思います。
２を実行すると、クエリパラメーターは変更されますが子２に含まれるAPIが実行されていません。
※API自体は正常に動作しています。

試したこと

親ファイルに含まれる子２のタグに"refs"属性を追加し検索処理終了後、
子２のAPI処理メソッドが実行されるように記述したがAPIは実行されていません。

コードが無いため非常に分かりづらいと思いますが、なにかわかる方がいればお答えいただけたらと思います。

Answer 1

原因は、子2 (コンポーネント) が再描画されていないことかと思います。

誤解しやすいのですが、ルートパスの変更時、VueRouterは画面遷移させるのではなく、router-viewタグ内のコンポーネントをルートにマッチしたものに置き換えています。
クエリパラメータのみの変更の場合、コンポーネントの再描画は行われません。
対策ですが、beforeRouteUpdateを用いてコンポーネントを再描画させるのはいかがでしょうか。
https://router.vuejs.org/ja/guide/advanced/navigation-guards.html#%E3%83%AB%E3%83%BC%E3%83%88%E5%8D%98%E4%BD%8D%E3%82%AC%E3%83%BC%E3%83%89