DoneJS app that renders dynamic components

AppViewModel.js

  componentProps: {
    default: navigation,
    serialize: false
  },
  flatComponentProps: {
    get () {
      return this.componentProps.reduce((links, link) => {
        if (link.children) {
          links = links.concat(link.children);
        } else {
          links.push(link);
        }
        return links;
      }, []);
    }
  },

  activeComponentProps: {
    get () {
      const pageId = this.page;
      const filtered = this.flatComponentProps.filter(comp => {
        return pageId === comp.id;
      });
      return filtered[0] || {};
    },
    serialize: false
  },
  activeComponentTemplate: {
    get () {
      const comp = this.activeComponentProps;
      if (comp.tag) {
        return stache(`
        <can-import from="${comp.path}">
            {{#if(isResolved)}}
              <${comp.tag} ${comp.attributes || ''} />
            {{else}}
                <div class="loading loading-lg" />
            {{/if}}
        </can-import>
        `);
      }
      return null;
    },
    serialize: false
  },

index.stache

 <div class="container">
    
    {{#if(activeComponentProps)}}
      {{#if (activeComponentProps.path)}}
          {{#if(session.user)}}
              {{#unless(activeComponentProps.forbidden(session.user)) }}
                  {{>activeComponentTemplate}}
              {{else}}
                  {{!-- forbidden! --}}
                  <br />
                  <div class="empty" style="margin: auto; auto; height:400px; width: 600px;">
                  <div class="empty-icon">
                      <i class="fa fa-3x fa-frown-o"></i>
                  </div>
                  <p class="empty-title h5">Oops! That page is forbidden</p>
                  <p class="empty-subtitle">You might want to tell someone about it</p>
                  <div class="empty-action">
                      {{!-- <button class="btn btn-primary">Send a message</button> --}}
                  </div>
                  </div>
              {{/unless}}

          {{else}}
              <br />
              {{#if(session.userPromise.isPending)}}
                  <div class="loading loading-lg"></div>
              {{else}}
                  <div class="empty" style="margin: auto; auto; height:400px; width: 600px;">
                  <div class="empty-icon">
                      <i class="fa fa-3x fa-frown-o"></i>
                  </div>
                  <p class="empty-title h5">Oops! You need to log in before you can access this page.</p>
                  </div>
              {{/if}}
          {{/if}}
      {{else}}
          <br />
          <div class="empty" style="margin: auto; auto; height:400px; width: 600px;">
          <div class="empty-icon">
              <i class="fa fa-3x fa-frown-o"></i>
          </div>
          <p class="empty-title h5">Oops! That page wasn't found</p>
          <p class="empty-subtitle">You might want to tell someone about it</p>
          <div class="empty-action">
              <button class="btn btn-primary">Send a message</button>
          </div>
          </div>
      {{/if}}
    {{else}}
      <div class="loading loading-lg">Loading</div>
    {{/if}}

  </div>