sb/src/App.vue

<template>

    <header>
    <h1>Story Baobab</h1>
    </header>

    <main>
    <AddScene @add="add"/>
    <section class="scenes">

    <SceneEntry 
        v-for="(scene, index) in scenes"
        :order="index+1"
        :title="scene.title" 
        :description="scene.description"
        :img="scene.img"
        @remove="remove(index)"
        />

    </section>
    
    </main>
</template>

<script setup>
import AddScene from './components/AddScene.vue'
import SceneEntry from './components/SceneEntry.vue'

import {ref} from 'vue'

const scenes = ref([])


const add = (e) => {
    scenes.value.push(e)
}

const remove = (index) => {
    scenes.value.splice(index, 1)
}

</script>

<style scoped>

header {
    margin: 32px;
}

.scenes {
    margin: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

</style>