How update a this.var without generate infinite loop

I need to update this.lastCounter in this function and I can’t put into computed.
I am using :row-class-name=“tableRowClassName” from elementUI el-select
In computed tableRowClassName hasn’t access to row and rowIndex

 tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        this.lastCounter = 0
      } else if (row.date !== this.filteredList[rowIndex].date) {
        this.lastCounter += 1
      }
      return this.lastCounter % 2 ? 'color-one' : 'color-two'
    }

I need to update this.lastCounter because I use it to change color of rows of a table.
Do you have some solutions or suggestions?
Thanks

Can you give more context regarding your approach?

I ask because if you just want to zebra stripe your table rows then use the css nth-child selector.

.row:nth-child(odd) {
  background-color: #cccccc;
}

.row:nth-child(even) {
  background-color: #ffffff;
}

Thanks for the answer James,
I don’t want zebra stripe every line. I want zebra stripe grouped by date. Means

11/12/2021 a
11/12/2021 b
11/12/2021 c
13/12/2021 d
13/12/2021 e
14/12/2021 f
14/12/2021 g

abc have color 1
de have color 2
fg have color 1

and so on
Thanks

I solved with a let variable before export default

let lastCounter = 0

export default {
  name: 'x',
  components: { y },

and inside tableRowClassName instead this.lastCounter I used lastCounter directly (as JS global variable)