Estoy tratando de hacer un juego simple de tirada de dados en VueJs pero tengo problemas para usar las imágenes de dados, siempre da un error 404 y cuando trato de usar require() dice que no está definido

Obtuve una solución usando este método en lugar de usar require() new URL('./components/icons/'+ this.img[this.dice-1], import.meta.url).href;

código:

aplicación.vue

 <template>
 <div>
 <button @click="roll">roll</button>
 <p> Resultado: {{dice}} </p>
 <div v-if="dice != 0">
 <img :src="selected"/>
 </div>
 </div>
</template>

<script>
 export default {
 data(){
 return{
 img: [
 '@/components/icons/dice1.png',
 '@/components/icons/dice2.png',
 '@/components/icons/dice3.png',
 '@/components/icons/dice4.png',
 '@/components/icons/dice5.png',
 '@/components/icons/dice6.png',
 ],
 selected: '',
 dice: 0,
 }
 },
 created(){
 this.selected = this.img[1];
 },methods:{
 roll: function(){
 this.dice = Math.ceil(Math.random() *6);
 this.select = this.img[this.dice];
 console.log(this.img[this.dice]);
 }
 }
 }
</script>

Principal.js

 import { createApp } from 'vue'
import App from './App.vue'


import './assets/main.css'

createApp(App).mount('#app')