Как рассчитать два входных значения и поместить результат в другую переменную?

Question

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

<template>
<div>      <form type="get" action="/asd">
    <div>

        <label>Add A</label>
        <button type="button"  @click="addRow">100</button>
    </div>
    <div> <label>Add B</label>
        <button type="button"  @click="addRow1">200</button>
    </div>

    <div v-for="row in rows" :key="row.id">
        <button-counter :name ="row.name" :id="row.id" :value="row.value"></button-counter>
    </div>   <div>total = ?</div>
    <button>submit</button>
    </form>
</div>

<script type="text/javascript">
Vue.component("button-counter", {
    props: {
        value: {
            default: ""
        }
    },
    template: '<input name=row.name type="text" style="margin-top: 10px;" v-model="value" >'
});

export default {
    data() {
        return {
            rows: [],
            count: 0
        };
    },
    methods: {
        addRow: function() {
            var txtCount = 1;
            let id = "txt_" + txtCount;

            this.rows.push({ name:'A',value:100, description: "textbox1", id });
        },
        addRow1: function() {
            var txtCount = 1;
            let id = "txt2_" + txtCount;
            this.rows.push({name:'B',value:200, description: "textbox2", id });
        }
    }
};