coreui-free-vue-admin-template中CRenderFunction渲染侧边栏图标异常

我在项目中使用 coreui-free-vue-admin-template 作为开发模板

上述图片为 _nav.js 的文件截图，当前侧边栏仅第一个导航项的图标可正常显示，其余导航项的图标均无法正常渲染

如果有了解该模板正确使用方式的开发者，烦请提供相关解决建议，以下为 TheSidebar.vue 组件的完整代码：

<template>
  <CSidebar 
    fixed 
    :minimize="minimize"
    :show="show"
    @update:show="(value) => $store.commit('set', ['sidebarShow', value])"
  >
    <CSidebarBrand class="d-md-down-none" to="/">
      <CIcon 
        class="c-sidebar-brand-full" 
        name="logo" 
        size="custom-size" 
        :height="35" 
        viewBox="0 0 556 134"
       />
      <CIcon 
        class="c-sidebar-brand-minimized" 
        name="logo" 
        size="custom-size" 
        :height="35" 
        viewBox="0 0 110 134"
      />
    </CSidebarBrand>

    <CRenderFunction flat :content-to-render="$options.nav"/>
    <CSidebarMinimizer
      class="d-md-down-none"
      @click.native="$store.commit('set', ['sidebarMinimize', !minimize])"
    />
  </CSidebar>
</template>

<script>
import nav from './_nav'

export default {
  name: 'TheSidebar',
  nav,
  computed: {
    show () {
      return this.$store.state.sidebarShow 
    },
    minimize () {
      return this.$store.state.sidebarMinimize 
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Best Partner