update

src/index.html

@@ -16,6 +16,10 @@
             <p class="card-text">
                 <input type="text" v-model="message" />
             </p>
+            <p>
+                Cards: {{ cards.length }}
+                Charcounter: {{ amountOfChars }}
+            </p>
             <a href="#" class="btn btn-primary" v-on:click="addCard">Add Card</a>
         </div>
 
@@ -40,6 +44,13 @@
                     cards: [],
                 }
             },
+            computed: {
+                amountOfChars() {
+                    if(this.cards.length === 0) return 0
+
+                    return this.cards.map(c => c.content.length).reduce((pv, cv) => pv + cv)
+                },
+            },
             methods: {
                 addCard() {
                     this.cards.push({