ViewAvenger.vue

<script>
export default {
	props: {
		id: Number,
	},
	
	data() {
		return {
			avenger: {}		// Our avenger object is initially empty
		};
	},
	
	methods: {
		async getData() {
			// API calls are usually asynchronous:
			const avenger = await this.$api.get(`avengers/${this.id}`);
			this.avenger = avenger;
		}
	},
}
</script>

ViewAvengerFinal.vue

<script>
export default {
	props: {
		id: Number,
	},

	data() {
		return {
			avenger: {}
		};
	},

	watch: {
		id: {
			immediate: true,
			async handler(id) {
				// We also replace 'this.id' simply with the 'id' argument:
				const avenger = await this.$api.get(`avengers/${id}`);
				this.avenger = avenger;
			}
		}
	}
}

ViewAvengerImmediate.vue

<script>
export default {
	props: {
		id: Number,
	},

	data() {
		return {
			avenger: {}
		};
	},

	watch: {
		id: {
			// This tells our component to fire the handler ASAP:
			immediate: true,
			handler: 'getData'
		}
	},
 
/* We don't need the mounted hook anymore!
* mounted() {
*   this.getData();
* },
*/

	methods: {
		async getData() {
			const avenger = await this.$api.get(`avengers/${this.id}`);
			this.avenger = avenger;
		}
	},
}
</script>

ViewAvengerMounted.vue

<script>
export default {
	props: {
		id: Number,
	},

	data() {
		return {
			avenger: {}
		};
	},

	mounted() {
		// We call the getData method when the component is mounted
		this.getData();
	},

	methods: {
		async getData() {
			const avenger = await this.$api.get(`avengers/${this.id}`);
			this.avenger = avenger;
		}
	},
}
</script>

ViewAvengerWatch.vue

<script>
export default {
	props: {
		id: Number,
	},

	data() {
		return {
			avenger: {}
		};
	},

	watch: {
		// Call 'getData' when 'id' prop changes
		id: 'getData',	
	},

	mounted() {
		this.getData();
	},

	methods: {
		async getData() {
			const avenger = await this.$api.get(`avengers/${this.id}`);
			this.avenger = avenger;
		}
	},
}
</script>