SOURCE

 var v = new Vue({
   	el:'#container',
    name: 'autoTable',
    data () {
      return {
        rows: null,
        cols: null,
        bgColor: null,
      }
    },
    methods: {
      random () {
        console.log("random() has been called")
        return Math.ceil(Math.random() * this.rows * this.cols)
      },
      color () {
        console.log("color() has been called");
        const red = Math.floor(Math.random() * 256)
        const green = Math.floor(Math.random() * 256)
        const blue = Math.floor(Math.random() * 256)
        return `rgb(${red},${green},${blue})`
      },
      getColor (e) {
        this.bgColor = e.target.style.backgroundColor
      },
    },
  })

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="container">
    <div class="ipt">
      <label >input: </label>
      <input type="number" v-model="rows" > x
      <input type="number" v-model="cols">
    </div>
    <p><b>Background Color :</b> {{bgColor}}</p>
    <table class="tab">
      <tr v-for="r in Number(rows)" :key="r">
        <td v-for="c in Number(cols)" :key="c"
            :style="{ backgroundColor: color() }"
            @click="getColor">{{ random() }}
        </td>
      </tr>
    </table>
  </div>