VueJS, displaying static images vs. binding a function from methods

Question

I'm a little unsure why I'm not able to display a image from a function within my vue code.

the setup here:

image with path (does display the image)

<img src="@/assets/gifs/the_office/200.webp" alt="" height="200" width="200">

image bound to function (does not display the image)

<img :src="randomGif()" alt="" height="200" width="200">

within my data() I return the names of the images:

return {
   res: [
      '200.webp',
      'giphy.webp'
   ]
}

and within my methods I'm using a function to get a random image from my returned results

methods: {
  randomGif(){
    return '@/assets/gifs/the_office/' + 
    this.res[Math.floor(Math.random() * this.res.length)];
  }
}

I'd be very thankful if someone is able to point out what I'm missing here. From what I understood I need to bind the src using :src to use returns from functions.