How to change the value of a button/(cell in a table) when pressed?

Question

Vue.js

There is a goal to make a table, sort of like a time sheet.
A line of 30 cells, when you click on one cell, let's say the first one, the value in it changes to the next one from the list, for example, a list of values: 1, I, C, O, B. The list should not drop out (that's how I did it), just value changes.
Bootstrap-vue has a button "In a button group" .
I tried to change this option, the level is not enough.

Answer 1

Store its index instead of the value. Click to increase it by one.
Accordingly, if you need to show the value:
Well, or if you store the values ​​themselves - when clicking, look for the index of the value in the array, take the following:
UPD. How it might look: one , two .