Vue

HTML

<div id="app">
  <demo>
    <span :key="i" v-for="i in l">{{ i }}</span>    
  </demo>
</div>

CSS

span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 1px 0 0 1px;
  background: #00df88;

  color: white;
  font-family: sans-serif;
  line-height: 40px;
  text-align: center;
}

.c {
  background: #df0088;
}

.m {
  background: #0088df;
}

Vue

Vue.component('demo', {
	template: `<div>
  	<span class="c">{{ c }}</span><!--
 --><span class="m">{{ m() }}</span><!--
 --><slot />
  </div>`,

	computed: {
  	c() { return this.$slots.default ? this.$slots.default.length : -1 }
  },
  
  methods: {
  	m() { return this.$slots.default ? this.$slots.default.length : -1 }
  },
})

new Vue({
	data() {
  	return { l: 0 }
  },
  
  created() {
  	setInterval(() => this.l++, 1000)
  }
}).$mount('#app')