I can't make a dynamic background image in vuejs, the url doesn't work

Question

Im trying to make 6 blocks with different background images, i tried different options but none of them works,

This works:

<div :style="{ backgroundImage: `url(${require('../assets/images/img/img-1.jpg')})` }"></div>

These two doesnt work even if 'test' is literally the right path for the img:

<div :style="{ backgroundImage: `url(${require(test)})` }"></div>

<div class="col-4 jum-block" :style="{ backgroundImage: 'url(' + require(test) + ')' }"></div>

<script>
export default {
   name: "Component",
   data() {
      return {
         test: "../assets/images/img/img-1.jpg",
         cardImgPath: "../assets/images/img/",
         images: [
            { img: "img-1.jpg" },
            { img: "img-2.jpg" },
            { img: "img-3.jpg" },
            { img: "img-4.jpg" },
            { img: "img-5.jpg" },
            { img: "img-6.jpg" },
         ],
      };
   },
};
</script>