User image not updating immediately after login

#1

I have a header and in that header I load the logged in user’s picture. My problem is once I login the picture isn’t updated immediately and I have to refresh to see the picture. Here is how I load it:

const photo = ref("");
onBeforeMount(() => {
	if (store.userId != null) {
		axios
			.get("api/v1/users/" + store.userId + "/profile")
			.then((response) => {
				photo.value = response.data.photo;
			})
			.catch((error) => {
				store.messages = [];
				store.messages.push(error.message);
				setTimeout(() => (store.messages = []), 4000);
			});
	}
});

and in the HTML:

					<img
						class="userMenuImg"
						alt="User"
						:src="photo"
						@click="toggleSub"
					/>

How can I get it to update the image immediately upon login?