Vue 2.0 Hello World

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>

<div id="app">
  <div class="main-row">
   <template v-for="i in 3">
     <signal-cell></signal-cell>
    </template>
</div>

CSS

/* space here->*/
   body > * > *,
   body > * > * > * > * > * > *{
      border: solid 1px red;
   }
   body > * > * > *,
   body > * > * > * > * > * > * > *{
      border: solid 1px green;
   }
   body > * > * > * > *,
   body > * > * > * > * > * > * > *{
      border: solid 1px darkturquoise;
   }
   body > * > * > * > * > *,
   body > * > * > * > * > * > * > * > * > *{
      border: solid 1px magenta;
   }
/**/
   
/*** GRID ***/
   .main-row{
      height: 50vh;
      width: 100%;
      padding: 1vh 0 1vh 1%;
   }
   .main-col{
      display:inline-block;
      height:100%;
      width:24%;
      margin-right:1%
   }

   
/*** CELLS ***/
   /* template
      <div class="main-col">
         <div class="cell-header">
         <div class="countdown-container">
            <..>
   */
   .main-col{
      color:var(--gray-100);
   }
   .cell-header{
      width:80%;/*
      border: solid 1.5px black;
      box-shadow: inset -3px 0px 12px -3px var(--gray-600);
      border-radius:0 30% 30% 0;
      
      background-color: white;/**/
      margin: 0 auto 0 auto;
      text-align:center;
      font-size:6vh;
      max-height:9vh; /* rought estimate, avoids box diplacement due to wrong aspect ratio*/
      overflow:hidden;
   }
   /*** COUNTDOWN ***/
      /* template
         <div class="countdown-container">
            <div class="countdown-clock">
               <span>18
                  <span>:40
            <div class="progress rounded-pill" >
               <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
      */

      .countdown-container {
         width:100%;  margin-top:2vh;
      }
      .countdown-container .countdown-clock {
         width:fit-content; margin:0 auto ;
      }
      .countdown-container .countdown-clock > span {
         font-size:12vh;
      }
      .countdown-container .countdown-clock > span > span{
       ...

JavaScript

Vue.component("signal-cell",{
	template:`
  <div class="main-col">
    <div class="cell-header">
      Some Text
    </div>
    <div class="countdown-container" v-show="isCdShown" >
      <div class="countdown-clock">
        18:40
      </div>
    </div>
  </div>`,
	data:function (){return {isCdShown:true}}
});
const app=new Vue({
  el: '#app',
  data: {
  	isCdShown:true,
  }
})

window.addEventListener('DOMContentLoaded', ()=>{
	setTimeout(()=>{
  	app.$children[0].$data.isCdShown=false;
  },2000);
	
});