Vue.js 初心者です。コンポーネント内の値をすべて合計する方法が分かりません。

状況

Vue.js を使いだして、3日目です。

フォームのテキストエリアをコンポーネント化しています。

テキストエリア名、ラベル名、行数の初期値を渡して、展開されるようにしています。
input: number 型のボックスと、テキストエリアの rows (行数）をデータバインディングしています。

やりたいこと

コンポーネントの rows の値をどうやって合算すればいいか
合計値を取得した後、最大値を超えていたら、加算された値を元に戻したい

コンポーネントで出力しているテキストエリアのすべての行数を合算し、最大値（ここでは20）を超えないようにしたいです。
ライフサイクルフックの updated か、computed を使えばタイミング的には拾えそうですが、うまくいきません。

html
1<div id="app">
2    <div v-for="c in contentGroup">
3        <textarea-component :label-name="c.name" :form-name="c.form" :row-start="c.start"></textarea-component>
4    </div>
5</div>

javascript
1var textareaComponent = {
2    template: '
3        '<label :for="formName">{{ labelName }}</label>' +
4        '<textarea class="lined" :name="formName" :id="formName" cols="18" :rows="count" :disabled="isDisabled"></textarea>' +
5        '<input v-if="viewChk" class="rows_number" :name="componentName" type="number" min="0" v-model.number="count">',
6    data: function () {
7        return {
8            maxNum: 20,
9            componentName: this.formName + "_control",
10            count: this.rowStart,
11            isView: true
12        }
13    },
14    props: {
15        labelName: String,
16        formName: String,
17        rowStart: String
18    },
19    computed: {
20        // rows の初期値が1の場合、number ボックスは表示しない
21        viewChk: function () {
22            if (this.rowStart == "1") {
23                return false;
24            } else {
25                return true;
26            }
27        },
28        // rows を編集して値が0になったら編集不可(disabledを有効)にする
29        isDisabled: function () {
30            if (this.count == 0) {
31                return true;
32            }
33        }
34    }
35};
36
37var vm = new Vue({
38        el: '#app',
39        data: {
40            maxNum: 20,
41            title_disabled: false,
42            job_type_control: "0",
43            sum: 0,
44            contentGroup: [
45                {name: '店名', form: 'shop_name', start: "2"},
46                {name: '勤務地', form: 'location', start: "3"},
47                {name: '電話番号', form: 'telno', start: "1"},
48                {name: 'その他', form: 'etc', start: "4"},
49            ]
50        },
51        computed: {
52            rowsSum: function () {
53                
54            },
55        },
56        components: {
57            'textarea-component': textareaComponent
58        }
59    })
60;

コンポーネント化する前は、個々に要素を書いて、データバインディングの設定をし、
Vue インスタンスの中の data に設定した値を computed で合算することができました。
やっている途中で、テキストエリアの部分が共通化できると考え、コンポーネント化してみたものの、
今度はデータの取り出し方が分からなくなりました…。

いったんは、jQuery で合算し、最大値を超えていたら力技で　number型とテキストエリアの数値を変更したのですが、
連打すると変わってしまったり、うまくいきません…。

やろうとしていることは、コンポーネントでは無理なのでしょうか？
コンポーネントの役どころというものも思い違いをしているかも知れませんので、ご教示頂けますでしょうか。
よろしくお願い致します。