How to access a specific dom element in vue?

Question

Vue.js

Hello.
There is such a code on js https://jsfiddle.net/2rpbqza0/ The bottom line is: there is an array with numbers. An element is created for each number. And there is a button, after clicking on which the elements change color in ascending order.
In this example, when creating an element, I add an id to it with an array value, by which I can later access it.
How to do the same on vue, working with data, and not with dom directly? https://jsfiddle.net/jg5u6f74/

Answer 1

.active {
  background: red;
}

data: () => ({
  val: -Infinity,
  ...
}),
methods: {
  onClick() {
    this.val = Math.min(...this.arr.filter(n => n > this.val));
  },
  ...
},

<div v-for="n in arr" :class="{ active: n <= val }">{{ n }}</div>
<button @click="onClick">click me</button>

Answer 2

If I understood the question correctly, then you need to use a loop and pass the id to the click listener.

<div v-for="item in items" @click="changeColor(item.id)" :key="item.id">
    {{ item.name }}
</div>