Dynamic menu and sub-menus using vuetify menu component

[stephenin]

I and trying to create a top/header navigation using vuetify's menu component. So far I could not find a single tutorial/sample online where the menu and sub-menu both are dynamic. all the samples/tutorials have a single button drop-down with dynamic values for sub-menus. I am looking for a sample/tutorial where there are a few, say 4-5 top-level menus (buttons) with some of them having sub-menu. Indeed, this would require a conditional check if the data has a sub-menu value or not. if the data doesn't have a sub-menu value only a top-level menu would be shown. All this with a data-driven approach. Can anyone suggest a sample or go to a place for such an example? Thank you very much!

In a nutshell:

1. Top level dynamic value with condition check to see if sub-menu exists
2. If a sub-menu exists, dynamic sub-menu values
   Sample menu data:
   menu_items: [
   {title: 'Table', path: '/', icon: 'mdi-home'},
   {
   title: 'Forms',
   path: '/forms',
   icon: 'mdi-home',
   submenu_items: [
   {
   title: 'Link 2',
   path: '/link2',
   icon: 'mdi-home',
   },
   ]
   sample UI with drop-down as well as no menu links