Is it possible to not use getElementById in vue?

Question

Vue.js

There is a 3 by 3 field (divs). each cell has x and y coordinates.
How to make it so that when you click on a cell, the cells adjacent to the edges change color.
Now I have it implemented like this (I use vue):
1) each cell has id = 'x_y' and has data-x, data-y;
2) when clicking on a div, I take x and y and calculate the coordinates of neighboring cells;
3) further on them (according to the coordinates of neighboring cells) I find the id and change the color.
It seems to me that it is not very 'correct' to access getElementById using vue.

Answer 1

I would implement using a simple matrix, instead of a color, you can also take an object with many parameters {Color, size, etc.}
For example: https://jsfiddle.net/3tqmcg3a/2/

Answer 2

Ignoring the markup, you should have something like this in your template:

<template v-for="cell in cells">
<cell :color="cell.color" @click="changeAround(cell)"></cell>
</template>

changeAround(cell) {
 // change cells color шт cells by using input cell

}

The meaning is this:
You have an array of cells cells.
You have a cell component and its input parameter is a color.
When a cell is clicked, a handler is called, which calculates, based on the cell data (serial number, position), neighboring cells whose color needs to be changed. Next, the template is reactively updated.