[Vuejs]-How to multiply values of the dynamically created input fields in laravel+vueJs component?

<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.sync="row.value"></button-counter>
        </div>
        <div>
            <li>total = {{ total }}</li>
        </div>
        <button>submit</button>
    </form>
    </div>
</template>


<script type="text/javascript">
    Vue.component("button-counter", {
        props: {
            value: {
                default: ""
            }
        },
        template: '<input name=row.name type="text" style="margin-top: 10px;" :value="value" @change="$emit(\'update:value\', $event.target.value)">'
    });

    export default {
        data() {
            return {
                rows: [],
                count: 0
            };
        },
        computed: {
            total() {
                if (this.rows.length) {
                    return this.rows.reduce((acc, row) => acc*row.value, 1);
                }

                return 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 });
            }
        }
    };

ADDITION

total(){
    return this.rows.reduce((acc, row) => acc += parseInt(row.value), 0);
}