cdn-axios

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js App</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div id="app">

    <ul>
      <li v-for="(item, index) in list" v-bind:key="item.id">
        ID: {{ item.id }} {{ item.name }} HP: {{ item.hp }}
      </li>
    </ul>



  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="main.js"></script>

</body>
</html>

[
  {"id": 1, "name": "スライム", "hp": 100},
  {"id": 2, "name": "ゴブリン", "hp": 300},
  {"id": 3, "name": "ドラゴン", "hp": 500}
]

new Vue ({
  el: "#app",
  data: {
    list: []
  },
  created: function() {
    axios.get('list.json').then(function(response) {
      this.list = response.data;
    }.bind(this)).catch(function(e) {
      console.error(e);
    })
  }
})