How to navigate nested array using arrows?

Question

JavaScript

I'm trying to navigate through the children of an array using the up/down arrows on the keyboard, but I don't understand how to specifically access the children.

Array:

options: [
                {name: 'Выход детали из строя в процессе эксплуатации', value: null,
                    children: [{name: 'Увеличение зазора, люфт (дробь/стуки)', value: 53},
                                {name: 'Обрыв детали', value: 54}]},

                {name: 'Поломка при установке', value: null},

                {name: 'Брак до установки', value: null,
                    children: [{name: 'Недокомплект', value: 55},
                                {name: 'Заводской брак (замятия, отсутствие резьбы, пробой пыльника и т.д.)',
                                    value: 56}]},

     ],

List output:

<div v-if="areOptionsVisible"
     :style="{maxHeight: maxHeight, overflow: 'auto', zIndex: zIndex}"
     class="w-autocomplete__items">
    <div v-for="option in filteredOptions" class="w-autocomplete__item_first" >
        {{ option.name }}

            <div v-for="item in option.children" class="w-autocomplete__item"
                :class="{'w-autocomplete__item_active': currentIndex === item}"
                @mouseenter="setActive(item)"
                 @keyup.up="changeCurrent('up', item)"
                 @keyup.down="changeCurrent('down', item)"
                 @click="doChoose(item)">
                {{ item.name }}
            </div>
    </div>
</div>

Methods:

computed: {
        filteredOptions(){
            if (this.searchText === ''){
                return this.options;
            } else{
               return this.options.flatMap(option => {
                   return option.children;
                }).filter(elem => {
                return elem && elem.name.toLowerCase().includes(this.searchText.toLowerCase());
             });
            }
        },
    },

    methods: {
        setActive(index) {
            this.currentIndex = index;
        },
        changeCurrent(direction) {


            if (this.currentIndex === null) {
                this.currentIndex = 0;
            } else if (direction === 'up') {
                if (this.currentIndex - 1 >= 0) {
                    this.currentIndex -= 1;
                }
            } else if (direction === 'down') {
                if (this.currentIndex + 1 <= this.options.length - 1) {
                    this.currentIndex += 1;
                }
            }
        },
        doChoose(item) {
            this.chosenItem = this.currentIndex;
            this.areOptionsVisible = false;
            this.searchText = item.name;
        },
               
    },

currentIndexis an object, each specific child element on hover. I want to move with the arrows just like on hover, excluding the top level elements. Please tell me how to do it?