Обновление
Проблема с this в вашем axios api обратном вызове.
Это неправильное место для объяснения this очень объяснительным.
В простом контексте - this - это объект, свойство которого function.И в вашем случае this получите window объект, поскольку вы используете function, который не lexically ограничен.Чтобы сделать это lexically scoped Используйте ES6 Arrow fn
new Vue({
el: "#app",
data() {
return {
users: []
}
},
mounted: function() {
axios
.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
this.users = response.data
})
.catch(function (error) {
console.log(error);
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<table>
<thead class="thead-dark">
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.email">
<td>{{user.name}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.phone}}</td>
</tr>
</tbody>
</table>
</div>
Вам нужно создать vue instance, который привязывает к нему ваш html.
Допустим, у вас есть html, который имеетid = app
<div id="app">
{{ message }}
</div>
Теперь, если вы хотите, чтобы этот кусок HTML использовал vue, вам нужно связать его.
var app = new Vue({
el: '#app', // This property el binds the container #app
data: {
message: 'Hello Vue!' // here you create your data values you want to use
}
})
Однако я бы посоветовал вам просмотреть vue отличная документация перед использованием - Vue JS