v-forの値をmethodsやcomputedで参照する

#はじめに
Vueの勉強を進める中で、v-forによって複数のボタンを作成した時に、ボタンごとに違うアクションをしたいと思った時にはまってしまいました。
※Todoリストを作成する際にも使える（Todoアイテムごとに削除ボタンをつけたりするとき）かと思います
###:key=""
v-forを使用するときに、なんとなくつけていた（私は付けていなかった） これが解決のキーとなりました。

#解決策

JavaScript

const box = Vue.createApp({
  data: function () {
    return {
      box: false,
      items: [
        {
          name: 'フェードイン',
          class: 'fadein',
          action: 1,
        },
        {
          name: 'フェードアウト',
          class: 'fadeout',
          action: 2,
        },
      ],
    };
  },
  methods: {
    go: function (index) {
      if (this.items[index].action == 1) { /*ここでindexを用いて、対象のitemを参照*/
        this.box = true;
      } else {
        this.box = false;
      }
    },
  },
}).mount('#app');

v-forによって作成されたボタンごとにactionの値を参照して、アクションを変えたいので、
html側でv-forと共に、:key="index"を添えて、items配列のindexを指定してあげることで、対象のitemを参照できる

html

<div id="app">
<!-- v-forと一緒に必ず:key属性を付与する-->
        <button type="button" v-for="(item, index) in items" :key="index" :class="item.class" @click="go(index)">{{ item.name }}</button>
        <transition>
            <div class="box" v-show="box"></div>
        </transition>
    </div>

#最後に
なぜ、key属性を設定するのかいまいちわからなかったのですが、今回key属性の大切さを学びました。
かなり初歩的な部分なんだろうなとは思っておりましたが、初心者はつまづくこともあるかと思いますので、参考にしていただけておりましたら幸いです。