How to load a dynamic image from a url in Nuxt3?

I have a nuxt 3 component which fails to load dynamic image that i'm getting from a specific URL(auth0 images).

My template looks like so:

<template>
     <img class="h-28 w-28 rounded-full border-4 border-black bg-gray-300" :src="image" alt=" " />
     <p> {{{name}} {{image}} </p>
</template>

And my script setup is like so:

<script setup>
  import { useAuth0 } from '@auth0/auth0-vue';
  
  let auth0 = process.client ? useAuth0() : undefined;
  let name = ref('');
  let image = ref('');

  //check user authentication state and set name and image
  if(auth0?.isAuthenticated){
    name.value =  auth0?.user.value.nickname;  //image url : https://....
    image.value =  auth0?.user?.value.picture;
  }
</script>

The name and image display in the paragraph, but image url is not present in the src attribute and thus the image does not show. The image actually renders after I go back and type something in VSCode. Any idea how I can make the image render?

It should be defined as a computed property since it depends on the value of the other property (do the same thing for name) :

<script setup>

  import { useAuth0 } from '@auth0/auth0-vue';
  
  let auth0 = process.client ? useAuth0() : undefined;

  const name = computed(()=>auth0?.isAuthenticated ? auth0?.user?.value.nickname:'');
  const image = computed(()=>auth0?.isAuthenticated ? auth0?.user?.value.picture:'');


</script>