axiosで外部からjsonを取ってきてv-forのループで表示させる、というよくあるサンプルにあるようなことなのですが、axiosでgetする際のURLをある程度変化させるようなことは可能なのでしょうか。

以下のようなHTML(PHP)と

(/hoge.php?id=5)
<div id="hogeapp">
    <div v-for="program in progams">
      {{program.name}}
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="./main.js"></script>

以下のようなjsで作ったvueのページがあるとして、

(main.js)
var hogeapp = new Vue({
    el: '#hogeapp',
    data:{
        programs: [],
        id:'',
    },
    mounted () {
        axios
            .get("json-programs.php?id=" + id)
            .then(response => {
                this.programs = response.data;
            })
    },
})

やりたいことは、HTMLのクエリストリングで指定されたIDのデータのみのJSONを取得できるよう、axiosのgetの段階でクエリストリングでidを指定したい(この場合 json-programs.php?id=5 からデータを取得したい)のです。

このソースを実行すると、初期状態ではmain.jsのdata:のIDは空なので、mountedされた段階でaxios.getに渡すURLが完成していません。

何らかの形で、mountedの前にHTMLのクエリストリングのID(5)をvueのアプリの変数idに渡せれば良いかと思ったのですが、その方法がわかりません。

一般的には全データを取得した上で、computedの中でfilterするのでしょうが、データの量が多いため、取得するデータは最低限にしたいという事情があります。
また、テキストボックスとidを双方向バインディングするなどが考えられましたが、htmlのクエリストリングのidをそのまま使いたいので、できれば余計なテキストボックスは画面に出したくないところです。

どういった方法が考えられるでしょうか。
あるいは、こういう場合はコンポーネントにしてしまうしかないのでしょうか?