Vuejs component does not render immediately

I have a vue app and a component. The app simply takes input and changes a name displayed below, and when someone changes the name, the previous name is saved in an array. I have a custom component to display the different list items. However, the component list items do not render immediately. Instead, the component otems render as soon as I type a letter into the input. What gives? Why would this not render the list items immediately?

(function(){
var app = new Vue({
    el: '#app',
    components: ['name-list-item'],
    data: {
        input: '',
        person: undefined,
        previousNames: ['Ian Smith', 'Adam Smith', 'Felicia Jones']
    },
    computed: {
        politePerson: function(){
            if(!this.person) {
                return 'Input name here';
            }
            return "Hello! To The Venerable " + this.person +", Esq."
        }
    },
    methods: {
        saveInput: function(event){
            event.preventDefault();
            if(this.person && this.previousNames.indexOf(this.person) === -1) {
                this.previousNames.push(this.person);
            }
            this.setPerson(this.input);
            this.clearInput();
        },
        returnKey: function(key) {
            return (key + 1) + ". ";
        },
        clearInput: function() {
            this.input = '';
        },
        setPerson: function(person) {
            this.person = person;
        }
    }
});

Vue.component('name-list-item', {
    props: ['theKey', 'theValue'],
    template: '<span>{{theKey}} {{theValue}}</span>'
});
})()

And here is my HTML.

<div id="app">
        <div class="panel-one">
            <span>Enter your name:</span>
            <form  v-on:submit="saveInput">
                <input v-model="input"/>
                <button @click="saveInput">Save</button>
            </form>
            <h1>{{politePerson}}</h1>
        </div>
        <div class="panel-two">
            <h3>Previous Names</h3>
            <div>
                <div v-for="person, key in previousNames" @click='setPerson(person)'><name-list-item v-bind:the-key="key" v-bind:the-value="person" /></div>
            </div>
        </div>
</div>