Background image-set() doesn't work with Vue's v-bind:style

Question

I am currently using Vue's v-bind:style to set the background of a div. This works fine. However, I am now trying to use background in combination with image-set(). Where a regular background-image is shown, the image-set() as a value returns nothing at all.

I made a very simple copy on JSbin which suprisingly works, which makes me clueless. Because whenever I try this local, no images are shown. I also don't get any errors or warnings in the console or by Grunt.

A very simplified version of the code is:

new Vue({
el: "#app",
data: { },
methods: {
  bg: function () { 
    /* Test image, is dynamic in code */
    var url = "https://picsum.photos/200/200.webp";
    var bg;
    /* This background works locally */
    bg = "background-image: url('"+ url +"');";
    /* This doesn't work locally */
    bg = "background-image:-webkit-image-set(url('"+ url +"')2x,url('"+ url +"')2x);background-image:image-set(url('"+ url +"')2x,url('"+ url +"')2x);"; 
    return bg;
  }
 }

});

The HTML looks like this:

<div id="app">
  <div class="test"  v-bind:style="bg()"></div>
  </div>

I am very new to Vue and I'd understand it's hard to debug a working code (since the JSBin is working). But perhaps the more experienced people here have an idea in what direction I could look.

Answer 1

Apparantly above works well in versions below 2.0.8. From this version on it stops working for whatever reason. I didn't find a solution yet to make it work in newer versions. For now I downgraded my Vue version.