Как получить сумму результатов 2-х компонентов?

Имеется следующий код, компоненты работают отдельно друг от друга как и задумывается, но мне хотелось бы, чтобы было еще отдельное поле, в котором также динамически выводилась бы сумма всех отмеченных чекбоксов из двух компонентов, т.е. общая сумма.

<div id="app">
  <checkbox-counter></checkbox-counter>
  <checkbox-counter></checkbox-counter>
</div>

Vue.component('checkbox-counter', {
  data: function () {
    return {
      items:[
        { value: [1, 1], checked: false },
        { value: [1, 1], checked: false },
        { value: [1, 1], checked: false },
      ],
      checkAll: false,
    }
  },
   computed: {
    total() {
       return this.items.reduce((acc, n) => acc + n.value[0] * n.checked, 0);
    },
    day(){
        return this.items.reduce((acc, n) => acc + n.value[1] * n.checked, 0);
    },
    },
        watch: {
        checkAll(val) {
        this.items.forEach(n => n.checked = val);
        },
    },
  template: '<div><input v-for="n in items" v-model="n.checked" type="checkbox"> <div>{{ total }}</div> <div>{{ day }}</div> <div><input type="checkbox" v-model="checkAll"></div></div>'
})


new Vue({
    el: '#app'
});