How to rebuild a template?

Question

Vue.js

Tell me, what methods should be used for v-if v-else in order to apply one or another pattern regarding the presence of child elements in the navigation?
Right now this template works, but it generates a nested menu for all links...

template: `
    <ul>
        <li v-for="item in navList">
            <a :href="item.url" :class="item.cls" :title="item.name" @click="isOpen = !isOpen">{{ item.name }}
                <ul :class="{ isOpen }" class="dropdown">
                    <li v-for="{ url, name, index } in item.children" :key="index">
                        <a :href="url" :title="name">{{ name }}
                     </li>
                </ul>
             </a>
        </li>
    </ul>
    `

experimental pattern

Vue.component('navigation', {
    props: ['item'],
    data() {
        return {
            isOpen: true,
            navList: [
                { url: '/#about', cls: 'about', name: 'О компании' },
                { url: '#', cls: 'services', name: 'Услуги',
                    children: [
                        { url: '/epb', cls: '', name: 'Экспертиза' },
                    ]
                },
        }
    },
    template: `    
    <ul>
        <li v-for="item in navList">
            <template v-if="">
                <a :href="item.url" :class="item.cls" :title="item.name">{{ item.name }}</a>
            </template>
            <template v-else>
                <a :href="item.url" :class="item.cls" :title="item.name" @click="isOpen = !isOpen">{{ item.name }}
                    <ul :class="{ isOpen }" class="dropdown">
                        <li v-for="{ url, name, index } in item.children" :key="index">
                            <a :href="url" :title="name">{{ name }}
                        </li>
                    </ul>
                </a>
            </template>
        </li>
    </ul>
    </template>
    `,

Answer 1

<ul v-if="item.children" :class="{ isOpen }" class="dropdown">