Tengo una plantilla y necesito llamar a una imagen de fondo en mi scss. Llamar a esta imagen usando una etiqueta img funciona perfectamente bien, pero tan pronto como intento lo mismo en mis etiquetas <style> , no funciona y ya no la encuentro y da el error Can't resolve .

Estoy usando Laravel y Vue, todos se envían a mi carpeta pública donde mi imagen está ubicada correctamente. Mi imagen está ubicada en un archivo llamado images en la carpeta pública, mientras que mi Vue va a mi App.js que está dentro de la carpeta js en público.

¿Cuál sería la forma correcta de llamar a una imagen en Vue? ¿Debo agregar una carpeta de assests a mi carpeta JS y agregar la imagen allí?

Gracias por cualquier ayuda de antemano. Carpeta de recursos de Laravel

Carpeta pública de Laravel

 <template> <div class="hero"> <!-- works --> <img src="images/home/wow.webp" alt="img"> <div class="hero-left"> <h1>HI</h1> </div> </div> </template> <script> export default { name: "Hero", } </script> <style lang="scss" scoped> .hero { height: 90vh; width: 100%; background-image: url('../images/home/wow.webp'); // Does not work img { height: 100%; width: 100%; } } </style>