renderComponentsFromCosmicData.js

<template lang="html">
  <div class="homescreen">
    <div class="cosmic-object-selector" v-show="selectedIndex == undefined">
      <h1> I want to learn more about.... </h1>
      <div class="cosmic-object-select row">
        <div class="cosmic-object col-md-3" 
             v-on:click="setSelectedAsset(index)" 
             v-for="(obj, index) in cosmicAssetObjs.slice(0,4)" 
             :key="index">
           <cosmic-asset 
             :cosmicObj="obj" 
             :assetKey="index" 
             class="cosmic-asset" 
           />
        </div>

        <div class="cosmic-object col-md-3" 
             v-on:click="setSelectedAsset(index+4)" 
             v-for="(obj, index) in cosmicAssetObjs.slice(4,8)" 
             :key="index+4">
           <cosmic-asset 
             :cosmicObj="obj" 
             :assetKey="index+4" 
             class="cosmic-asset" 
           />
        </div>

        <div class="cosmic-object col-md-3" 
             v-on:click="setSelectedAsset(index+8)" 
             v-for="(obj, index) in cosmicAssetObjs.slice(8)" 
             :key="index+8">
           <cosmic-asset 
             :cosmicObj="obj" 
             :assetKey="index+8" 
             class="cosmic-asset" 
           />
        </div>
      </div>
    </div>
    <cosmic-page 
        class="cosmic-page" 
        v-if="selectedIndex != undefined" 
        :cosmicObj="cosmicAssetObjs[selectedIndex]" 
    />
  </div>
</template>