Expected behavior

<MDBSideNavLink :to="submenu.route">
   <i :class="submenu.icon"></i> {{ submenu.text }}
</MDBSideNavLink>

Actual behavior

<router-link :to="submenu.route">
   <MDBSideNavLink>
      <i :class="submenu.icon"></i> {{ submenu.text }}
   </MDBSideNavLink>
</router-link>

submenu.router is vue-router object {path: '/page', name: 'page', component: () => import('./components/page')};

Both methods are working, but encapsulated version with router-link and MDBSideNavLink generates console warning and wrong highlights in the menu.

[Vue warn]: Invalid prop: type check failed for prop "to". Expected String with value "[object Object]", got Object

and <MDBSideNavLink :to="{name:submenu.route.name}"> doesnt change anything, any better solutions?