How to access elements in vue page?

Question

Vue.js

Hello.
I'm learning vue and faced such problem that I can't access the table, I need to color the columns.

I put comments on the code where I have difficulties.

<template>
    <div class="container">
        <div class="row">
            <button v-on:click="update1" type="submit" class="btn btn-primary mb-3">Обновить позиции</button>

            <table class="table">
                <thead>
                <tr>
                    <th>Ключи</th>
                    <th v-for="date in urldata.dates" v-model="urldata1">{{ date }}</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="rows in urldata.keyAll">
                    <td>{{ rows }}</td>
                    <td v-for="date in urldata.dates">{{ urldata.values[date][rows] }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        data: function(){
            return{
                urldata: [],
                urldata1: []
            }
        },
        mounted() {
            this.color();
        },
        methods: {
  
//ВОТ ТУТ ВОТ БЕДА =========================================
//на jquery этот скрипт работает, но в vue не прокатывает такое обращение


            color:function () {
                console.log(this.table.rows); //выдает undefined
                // var numberRows__ = this.table.rows[1].cells.length; //количество столбцов в первой строке
                // var numberRows_ = numberRows__ - 2; // номер предпоследнего столбца
                // var numberRows = numberRows__ - 3; // номер предПРЕДпоследнего столбца
                //
                // for(var i=1; i<table.rows.length; i++)
                // {
                //     if (table.rows[i].cells[numberRows_].innerText === '')
                //     {
                //         $(table.rows[i].cells[numberRows_]).css('background-color', 'white');
                //     }
                //     else if (table.rows[i].cells[numberRows_].innerText > table.rows[i].cells[numberRows].innerText)
                //     {
                //         $(table.rows[i].cells[numberRows_]).css('background-color', 'red');
                //     }
                //     else if (table.rows[i].cells[numberRows_].innerText === table.rows[i].cells[numberRows].innerText)
                //     {
                //         $(table.rows[i].cells[numberRows_]).css('background-color', 'yellow');
                //     }
                //     else
                //     {
                //         $(table.rows[i].cells[numberRows_]).css('background-color', 'green');
                //     }
                // }
            }
        }

    }
</script>

Answer 1

Vue has a different approach. Here we always start from the data, and based on them we draw the page. Instead of picking the DOM after it has been created.
Add the coloring data to the data array. Using cells as an example, into urldata.dates elements
And use them:

<td v-for="date in urldata.dates" :style="{backgroundColor: date.backgroundColor}">
  {{ urldata.values[date][rows] }}
</td>

UPD