JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.5/vue.min.js"></script>
<div id="container">
    <div class="row" v-repeat="testData">
        <p>Grade avg:
            <!--this should be average of sub grades that aren't 0-->
            <input type="text" v-model="avgGrade" disabled />
            <div v-repeat="vals">Sub grade {{item}}:
                <input type="text" v-model="grade" v-on="change:calcAverage" />
            </div>
        </p>
    </div>
</div>

CSS

.row {
    margin-bottom:10px;
    border:1px solid #000;
    padding-left:10px;
}
input {
    width:20px;
    text-align:center;
}

JavaScript

var data = [
    {item: 1,avgGrade: 2,vals: [{grade: 2}, {grade: 2}, {grade: 2}]},
    {item: 2,avgGrade: 3,vals: [{grade: 3}, {grade: 3}, {grade: 3}]},
    {item: 3,avgGrade: 4,vals: [{grade: 4}, {grade: 4}, {grade: 4}]}
];

var testVue = new Vue({
    el: '#container',
    data: {
        testData: data
    },
    methods: {
        calcAverage: function (e) {
            //calculate the average of sub grades
            //change Grade avg to show this
            
        }
    }
});