How to make a drop down menu like this in Vue?

Question

JavaScript

Good morning everybody!
Compiled such a menu in the vue component

but it was required for item three ( three ) to add a submenu. I moved the nesting to childred , but I don't understand how to rebuild the template and implement a click on the third item. I need your help.

Answer 1

figured out

<ul>
        <li v-for="item in navList">
            <a :href="item.url" :class="item.cls" :title="item.name" @click="isOpen = !isOpen">{{ item.name }}
                <ul v-if="item.children" :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>

Answer 2

Better take a look here
https://vuejs.org/v2/examples/tree-view.html