Laravel5.7 で作成した検索フォームにVue.jsを取り入れてセレクトボックスの自動生成などを実現したい

Question

実現したいこと

「都道府県」セレクトボックスを選択すると隣の「エリア」セレクトボックス（今はまだ置いていません）の内容が自動生成される仕組みを
Vue.jsで実現したいです。
Vue.jsは触ったことがありません。
系統立てて学習する時間が取れず、ググってもわからないためこちらに質問させていただきました。

現状

すでにLaravel5.7で以下のような「都道府県」セレクトボックスを含む検索フォームを作成して
動作確認もしております。
※「エリア」セレクトボックスはまだ置いていません。

（以下フォームが続く...）

[index.blade.php]都道府県の部分

  <div class="row mb-2">
    <div class="col-3">所在地</div>
    <div class="col-9">
      {{ Form::select('prefecture', ['' => '都道府県'] + array_column(Config::get('const.pref'), 'name', 'id'), null) }}
    </div>
  </div><!-- //.row -->

[config/const.php]

<?php
return array(
  'pref' => array(
    array(
      'id' => '01',
      'name' => '北海道',
      'area' => array(
        '0010001' => '道南エリア',
        '0010002' => '道央エリア',
        '0010003' => '道北エリア',
        '0010004' => '道東エリア'
      ),
    ),
    array(
      '02' => '青森県',
      ...

やってみたこと

Vue.js が動かせる状況まではもってこれました。

※ただし、都道府県は直書き状態です。
[index.blade.php]

  <div class="row mb-2">
    <div class="col-3">所在地</div>
    <div class="col-9">
      <select v-model="selected">
        <option disabled value="">都道府県</option>
        <option>北海道</option>
        <option>青森県</option>
        <option>秋田県</option>
      </select>
      <span>Selected: @{{ selected }}</span>
    </div>
  </div><!-- //.row -->

[resources/js/app.js]

...
const app = new Vue({
    el: '#app',
    data: {
      selected: ''
    }
});

ご質問

Q1. 現状の const.php のデータを用いて「都道府県」セレクトボックスを用意する方法はありますでしょうか。

Q2. 「都道府県」を選択すると同時に「エリア」のセレクトボックスの内容を自動生成させるにはどのように書いたらよろしいでしょうか。
※今後、検索フォーム内やその他のページの様々な箇所にVue.jsを用いていきたいので拡張しやすい書き方、ファイル構成などで教えていただけると有り難いです。

Q3. Q1, 2 の前にそもそも現状の const.php の値の持ち方が適切でなければそちらも併せてご指摘ください。

どうぞよろしくお願いいたします。

Answer 1

サーバーサイドPHPとクライアントサイドJSのデータのやり取りはAPI経由で行うのが一般的です。
したがって、

const.php のデータを用いて

これが行いたいのであればLaravel側で都道府県一覧を返すJSON APIを作って下さい。
単に定数から都道府県を読みたいだけであれば const.js など作成して下さい。

Comments

[toitoitoi]

JSON APIですね。調べてみます。

突破口を教えてくださりありがとうございます！