How to make data reactive when it's array in V

Question

<template>
  <button v-on:click="modify"> modify </button>
  <div v-model="lists">{{ lists[0] }}</div>
</template>

<script>
export default {

 methods: {
    modify: function() {
      console.log(this.lists)
      this.lists[0][0] = 2
      console.log(this.lists)
    },

  data: function () {
    return {
      lists: [[1,2,3],[2,3,3]]
    }
  }
}
</script>

The array at template does not seems to get updated. But the log console has changed.

How do you make a data reactive when it's an array?

What is actually happening:

Before clicking modify
<div v-model="lists">{{ lists[0] }}</div> # produce 1
After clicking modify
<div v-model="lists">{{ lists[0] }}</div> #produce 1

What is expected:

Before clicking  modify
<div v-model="lists">{{ lists[0] }}</div> # produce 1
After clicking modify
<div v-model="lists">{{ lists[0] }}</div> #produce 2

Answer 1

This is a caveat when updating arrays by index in Vue. Try this.

this.lists[0].splice(0,1,2)