How to focus on an element inside a component when element is rendered by V-For?

So I have made a table using bootstrap-vue, each row is rendered using v-for and contains a student's information. One of the cells has an input field for entering a score for a test. These inputs need to be navigable by pressing up and down arrow keys so have moveDown and moveUp functions attached. The functionality works but only in the first component rendered on a page, how can I ensure it works on each component?

I have tried adding something like:

 :id="this.test.id + (index+1)"

but get an error, and I also tried refs but I keep getting a "is not a function error"

<tr v-for="(student, index) in students" :key="student.id">
<td><input type="text" :id="(index +1)" v-model="student.mark" v-on:keyup.up="moveUp(index +1)" v-on:keyup.down="moveDown(index +1, students.length)">
</td>
</tr>

...

moveUp(currentinput) {
        if (currentinput > 1) {
            document.getElementById(currentinput - 1).focus();
        }
    },
    moveDown(currentinput, maxinput) {
        if (currentinput < maxinput) {
            document.getElementById(currentinput + 1).focus();
        }
    },

Any help is greatly appreciated!