Vue не читал мой дочерний компонент в циклах v-for

Question

Что не так: Vue возвращает пустой массив, когда я console.log .Однако когда я щелкнул его в Developer Tools, данные были там!

Предыстория: Я на самом деле пытался сделать общее значение дочерних данных, имеет ли это значение дочернее или нет, однако при попытке просто открыть данные компонента ни одно не появилось!

PS Дочерние данные будут автоматически обновляться каждые X секунд.

Результат console.log(this.$children); показывает [] (пустой массив) в консоли.Но когда я щелкнул по нему, он открывает весь массив детей.Но когда я попытался раскрыть его через this.$children[0], он показывает значение undefined!

Так вот моя ссылка на JSFiddle https://jsfiddle.net/irfandyjip89/zmn5yhju/

Vue.component("comp", {
  props: ["location"],
  template: "#comp"
})
vm = new Vue({
  el: "#vm",
  data: {
    location: [{
      nation: "America",
      money: "Dollar"
    }, {
      nation: "China",
      money: "Yuan"
    }, {
      nation: "Thailand",
      language: "Baht"
    }]
  },
  computed: {
    totalNation() {
      console.log(this.$children)
      return this.location.length
    }
  }
})

<section id="vm">
  Total of Nations : {{totalNation}}
  <comp v-for="loc in location" :location="loc.nation"></comp>
  Child : {{$children}}
</section>

<template id="comp">
    <li>{{location}}</li>  
</template>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

Что должно произойти: Я могу получить доступ к данным детей.

Пожалуйста, не стесняйтесь спрашивать дополнительную информацию.