vue.jsでAPIで取得したデータをAPIで取得したHTMLにバインドしたいです。

お世話になります。最近vueを学習し始めたものです。
どなたかご教授頂ければ幸いです。よろしくお願いいたします。

vue.jsでAPIを叩きテンプレートを取得いたします。また同時にそのテンプレートにバインドしたい値もAPIで取得します。この取得したテンプレートに取得した値を入れようとしても値が入らず苦戦しております。コードは下記の通りです。

下記をbase.htmlとします。この中のv-html="screen"に取得したHTMLファイルwriters.htmlを埋め込みます。

html
1<div id="app">
2  <button v-on:click="getScreen">GetScreen</button>
3  <!-- こちらにデータをバインドしたい -->
4  <div v-html="screen"></div>
5
6  <!-- こちらはデータがバインドされる -->
7  <div v-if="data.writers">
8    <table border="1">
9      <tr>
10        <th>ID</th>
11        <th>NAME</th>
12      </tr>
13      <tr v-for="writer in data.writers">
14        <td>{{ writer.id* }}</td>
15        <td>{{ writer.name }}</td>
16      </tr>
17    </table>
18  </div>
19</div>

埋め込まれるwriters.htmlは下の通りです。base.htmlのバインドされる方と同じコードになりますが、値がバインドされません。

writers.html
1<div v-if="data.writers">
2  <table border="1">
3    <tr>
4      <th>ID</th>
5      <th>NAME</th>
6    </tr>
7    <tr v-for="writer in data.writers">
8      <td>{{ writer.id }}</td>
9      <td>{{ writer.name }}</td>
10    </tr>
11  </table>
12</div>

javascriptは下の通りです。

javascript
1var app = new Vue({
2  el: '#app',
3  data: {
4    screen: 'No Screen...',
5    data: 'No Data...'
6  },
7  methods: {
8    getScreen: function () {
9      axios
10        .get('/myapp/get_writers_template')
11        .then(response => (this.screen = response.data))
12        .catch(error => console.log(error))
13      axios
14        .get('/myapp/get_writers')
15        .then(response => (this.data = response.data))
16        .catch(error => console.log(error))
17    },
18  }
19});