Vuetifyにおけるv-btn内の値の変更について

Question

前提・実現したいこと

Nuxt.js(Vuetify)でボタンの値がカウントアップするような仕組みを作っています。
カウンタが複数個ある時に各ボタンをクリックしてそれぞれ独立にカウントアップができるようにしたいのですが、カウンタを配列で管理した時にクリックしてもv-btn内のテキストが変化しません。
出力よりカウンタの加算自体に問題がないことは確認しています。

問題の切り分けによりcounterが1個のとき、つまり配列を用いないときには本現象が発生しないことが分かっています。
恐らくmustache構文では配列の中身が更新されても表示される値が更新されないように思われますが、配列の中身が更新された時に画面描写される方法はありますでしょうか？

該当のソースコード

<template>
  <v-container>
    <v-row dense>
      <v-col v-for="(count, index) in counter" :key="count" cols="auto">
        <v-btn
          width="100"
          color="white"
          @click="incrementCounter(index)"
        >
          {{ count }}
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    asyncData() {
      const counter = [0, 0]
      return {
        counter,
      }
    },
    methods: {
      incrementCounter(index) {
        this.counter[index]++
        console.log(this.counter) //counter自体は正常に加算されている
      },
    },
  }
</script>

試したこと

counterを一時的にディープコピーをして配列毎書き換えれば機能しますが少し冗長な気がします。

<template>
  <v-container>
    <v-row dense>
      <v-col v-for="(count, index) in counter" :key="count" cols="auto">
        <v-btn
          width="100"
          color="white"
          @click="incrementCounter(counter, index)"
        >
          {{ count }}
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    asyncData() {
      const counter = [0, 0]
      return {
        counter,
      }
    },
    methods: {
      incrementCounter(counter, index) {
        const tmp = JSON.parse(JSON.stringify(counter))
        tmp[index] = this.counter[index] + 1
        this.counter = tmp
      },
    },
  }
</script>

補足情報（FW/ツールのバージョンなど）

node v14.17.5
@nuxt/cli v2.15.8
vuetify 2.5.8

Answer 1

どうやらjavascriptではローカル変数の再代入を追跡する仕組みがないようです。
リアクティブの探求

ローカル変数の再代入を追跡することはできません。 JavaScript にはそのような仕組みがないからです。オブジェクトのプロパティの変更は追跡することができます。

結局オブジェクトの再代入が一番良さそうです。一時変数を用いずにObject.assignを使いました。

<template>
  <v-container>
    <v-row dense>
      <v-col v-for="(count, index) in counter" :key="count" cols="auto">
        <v-btn
          width="100"
          color="white"
          @click="incrementCounter(index)"
        >
          {{ count }}
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    asyncData() {
      const counter = [0, 0]
      return {
        counter,
      }
    },
    methods: {
      incrementCounter(index) {
        this.counter[index] += 1
        this.counter = Object.assign({}, this.counter)
      },
    },
  }
</script>