<template>

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

    <main>
        

        <input v-model="title">
        <button @click="add">New Scene</button>
        
        <SceneEntry v-for="scene in scenes" :title="scene"/>

    </main>
</template>

<script setup>

import SceneEntry from './components/SceneEntry.vue'
import {ref} from 'vue'

const scenes = ref([])
const title = ref('')
const add = () => {
    scenes.value.push(title.value)
    title.value = ""
    }

</script>

<style scoped>

header {
    margin: 32px;
}

main {
    margin: 32px;
}



</style>
