Menubar, ContextMenu, TieredMenu warning

[cagataycivici]

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: VNode created with invalid key (NaN). VNode type: Symbol(Fragment) 
  at <SubMenu model= (6) [{…}, {…}, {…}, {…}, {…}, {…}] root=true popup=false  ... > 

[agm1984]

I'm getting this error with the following code:

const items = ref([
    reactive({
        label: truncatedUserName,
        items: [
            { separator: true },
            {
                label: 'My Profile',
                icon: 'icon-profile',
                to: { name: 'login' },
            },
            {
                label: 'Log Out',
                icon: 'icon-logout',
                command: () => logout(),
            },
        ],
    }),
]);

const toggleMenu = (event) => {
    menu.value.toggle(event);
};

// ...

            <button
                id="nav-user-menu"
                class="w-10 h-10 flex items-center justify-center"
                aria-haspopup="true"
                aria-controls="overlay_menu"
                @click="toggleMenu"
            >
                <i class="icon-chevron-r icon-xl"></i>
            </button>

            <Menu ref="menu" :model="items" popup />

[Vue warn]: VNode created with invalid key (NaN). VNode type: Symbol(Fragment)

When I remove the heading in the menu items, the problem goes away.

[agm1984]

Found it. It was actually caused by the separator. I removed that and the error went away, so something about having a separator as the first child subitem causes the error.

I looked at the code and it looks to be because the key attribute is based on the subitem's label, so I was able to fix the problem by assigning a label to the separator:

{ label: 'test', separator: true },

That also fixed the error.