ListComponent.vue

<template>
    <div class="container">
        {{computeListData}}
    </div>
</template>
<script>
export default {
    computed: {
        computeListData(){
            let newList = []
            this.soundpacks.forEach((item) => {
                let data = this.genres.filter((genre) => {
                    return (genre.id === item.genre_id)
                })
                let listData = item
                listData.label = data[0].label
                newList.push(listData)
            })
            return newList
        }
    },
    data(){
        return{
            genres: [
                {
                    id: 1,
                    label: 'Techno'
                }, 
                {
                    id: 2,
                    label: 'Deep House'
                }
            ],
            soundpacks: [
                { 
                    title: 'Techno soundpack',
                    tempo: 130,
                    genre_id: 1,
                    teacher_id: 1
                },
                { 
                    title: 'Deep House soundpack',
                    tempo: 123,
                    genre_id: 2,
                    teacher_id: 2
                }
            ]
        }
    }
}
</script>