<script>
    Vue.component('word-relay',{  //글로벌 컴포넌트
        template:`
            <div>
                <div></div>
                    <form v-on:submit="onSubmitForm">
                        <input type="text" ref="answer" v-model = "value">
                        <button type="submit"> 입력 </button>
                    </form>
                <div></div>
            </div>
        `,
        props: ['start-word'],
        data(){
            return {
                word: this.startWord,
                result: '',
                value: '',
            }
        },
        methods:{
            onSubmitForm(e){
                e.preventDefault();
                if(this.word[this.word.length -1] === this.value[0]) {
                    this.result = '정답';
                    this.word = this.value;
                    this.value = '';
                    this.$refs.answer.focus();
                }
                else{
                    this.result = '오답';
                    this.value = '';
                    this.$refs.answer.focus();
                }
            },
        },
    })
</script>
<script>
    const app = new Vue({
        el: '#root',
    });
</script>