when is better to fetch data vue code example

Example: data fetching vue

<template>
	<div>
		<h1>{{ title }}</h1>
		<ul>
			<li v-for="user in users" :key="user.id">{{ user.id }}. {{ user.name }} - {{ user.email }}</li>
		</ul>
	</div>
</template>

<script>
	import axios from 'axios'

	export default {
		name: 'Users',
		props: {
			title: String
		},
		data: () => ({
			users: []
		}),
		mounted() {
			axios.get('https://jsonplaceholder.typicode.com/users').then((res) => {
				this.users = res.data
			})
		}
	}
</script>

<style scoped>
	h1 {
		color: black;
		font-size: 24px;
		font-weight: 200;
		padding: 0px 10px 0px;
	}
	ul li {
		list-style: none;
		color: black;
		font-weight: 400;
		opacity: 0.8;
		font-size: 18px;
	}
</style>