セレクトタグで選択した値をjs側に送りたいです。

Question

以下の機能の動的セレクトボックスをVue.jsとFlaskで作成したAPIを使ってで作成しております。
①セレクトボックスにDBのテーブル名を表示（APIでテーブル名のリストを表示させてる）→選択
②上記で選んだテーブル名のテーブル内のカラムを①とは別のセレクトボックスに一覧表示する
（APIでカラムのリストを表示させてる）

そこで、②のaxios.getでAPIを呼ぶ際のパラメーターに①で選んだテーブル名を与える方法をご教授頂きたいです。
API2を呼ぶ際のパラメータに固定の文字列を与えることで動作は確認できております。
Vue.jsの経験が浅く、その他記述方法などでアドバイスなどがあれば教えて頂ければ幸いです。
よろしくお願いします。

index.js

new Vue({
  el: '#app2',
  data: () => ({
    table_list: '',
    table_list_selected: ''
  }),
  created: function () {
    axios.get('API１').then(response => {
      this.table_list = response.data
    }).catch(function (error) {
      console.log(error)
    })
  }
})
new Vue({
  el: '#app3',
  data: () => ({
    tag_list: '',
    tag_list_selected: ''
  }),
  created: function () {
    axios.get('API2', {
      params: {
        tableName: ''←ここで①で選択した値を入れたいです。
      }
    }).then(response => {
      this.tag_list = response.data
    }).catch(function (error) {
      console.log(error)
    })
  }
})

<div id="app2">
      <select v-model="table_list_selected">
        <option v-for="table in table_list">{{ table }}</option>
      </select>
    </div>
    <div id="app3">
      <select v-model="tag_list_selected">
        <option v-for="tag in tag_list">{{ tag }}</option>
      </select>
    </div>

Answer 1

appの中にappを入れるのはまずいと思います。
app2の再レンダリングでdomとapp3のバインドが消える気がします。
そもそも、ルートapp以外で複数のappを連携させるのは希だと思われます。

素直に、app3をコンポーネントに置き換えましょう

Comments

[amaturePy]

ありがとうございます！
コンポーネントはこういう場合にも使えるのですね！勉強になりました！
調べながらコンポーネント化させて見たいと思います！

[amaturePy]

もし検討外れな質問でなければ教えて頂きたいのですが、
今回の場合はセレクトボックスという機能でまとめるとして上のコードで言うapp2とapp3で一つのコンポーネントにまとめるべきでしょうか？？または、すごい浅い質問かもしれませんが、app2（テーブル名の値を持つ）を親コンポーネントにし、子コンポーネントのapp３にデータを送る方法がいいでしょうか？？