[Vuejs]-Why does javascript expression in Vue binding <g-image> does not work?

Gridsome documentation

The src attribute and options like width, height and quality must be static values because they are compiled into an object which contains URLs and other information that will be rendered into an img tag

I admit Im not a regular Gridsome user and everything which follows comes from my understanding of Vue/Webpack, Gridsome docs and this issue

g-image is component provided by Gridsome intended to make use of responsive images easier. Most of the job is done during build time – they use some Webpack magic to process Vue templates. If g-image is found, it’s src attribute is read and if it contains path to existing local image, they take the image, generate multiple copies of it with different sizes and add srcset attribute which allows the browser to decide which image to download depending on screen size…

Important thing is this is all happening at build time. It means your app is not running which means it is not possible to evaluate any JS dynamic expression used for src (probably based on app state)!

It may seem as using require() (which is Webpack construct which allows some dynamic content) makes it work but you will loose main g-image feature which is automatic generation of responsive image…

This is not an issue easy to solve on Gridsome side (look how old the issue is and how much attention from maintainers it gets). If you really want dynamic responsive images, you will need to use simple img and generate image variants (and srcset) some other way. Or you can use Cloudinary to generate those images on the fly….