seepur/resources/scripts/applications/home/components/Child_Card.vue

<template>
  <!-- <div class="card"> -->
  <div class="card-content has-pointer" @click="goToChild(child)">
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img class="is-rounded is-avatar" :src="child.avatar" :alt="child.name" />
        </figure>
      </div>
      <div class="media-content">
        <p class>{{child.name}}</p>
        <!-- <p class>{{childAge}}</p> -->
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>
<script lang="ts">
import Moment from "moment";
let childAge;
export default {
  name: "ChildCard",
  props: ["child"],
  methods: {
    goToChild(child) {
      this.$router.push({ path: `/child/${child.id}` });
    }
  },
  created() {
    this.childAge = Moment().diff(this.child.dob, "years");
  },
  data() {
    return {
      childAge
    };
  }
};
</script>