Watching child component computed properties

DataTable.vue

<template>
    <table-component
        :data="[
             { firstName: 'John', birthday: '04/10/1940'},
             { firstName: 'Paul', birthday: '18/06/1942'},
             { firstName: 'George', birthday: '25/02/1943'},
             { firstName: 'Ringo', birthday: '07/07/1940'},
         ]"
         sort-by="firstName"
         sort-order="asc"
         ref="table"
    >
        <table-column show="firstName" label="First name"></table-column>
        <table-column show="birthday" label="Birthday" :filterable="false" data-type="date:DD/MM/YYYY"></table-column>
        <template slot="tfoot">
            <th>&nbsp;</th>
            <th>Total: {{ sum }}</th>
        </template>
    </table-component>
</template>
<script>
    // some code

    data() {
        return {
            sum: 0,
        }
    },
    
    mounted() {
        this.$watch(() => this.$refs.table.displayedRows.length, (value) => { this.sum = value;})
    },
</script>