Navigate with arrow keys in a vue component under an input box

Question

I have a Vue input box through which I filter a list of names. The filtered list (which is a Vue component) appears correctly under the input box, but I would like to use the arrow keys to navigate through this list. The problem is that the keys do not work:

This is the code of the input box and the list:

                    <form method="GET" action="/api/species/" v-ajax>
                    <div class="row">   
                        <div class="col-sm-8 has-success">
                            <input type="text"
                            class="form-control input-lg input-font-mimi-normal"
                            v-model="queryName"
                            v-on:keyup="searchNames"
                            v-on:click="resetQueries"
                            >
                        </div>
                        <div class="col-sm-4">
                            <button type="submit" class="btn btn-primary btn-lg pull-right" v-show="searchingNames"><strong>Search</strong></button>
                        </div>
                    </div>
                </form>
                <div class="row" v-if="!isSearching">
                    <div class="col-sm-8">
                        <species-names :list="searchedNames"></species-names>
                    </div>
                </div>