v-forの中でrefを生成すると、refが配列になってしまう

Question

https://forum.vuejs.org/t/this-refs-theid-returns-an-array/31995/3

こちらの記事でも言及されてますが

<div v-for="(item, index) in items">
  <child-component ref="'MyComp'+index"></child-component>
</div>

記事から引用したこちらのコード、おそらく

this.$ref.MyComp1.click() //→click() is undefined
this.$ref.MyComp1[0].click() //できる

このような結果が得られると思います。
ここを配列にせずに普通に this.$ref.MyComp1.click() のような書き方でアクセスする方法はないのでしょうか。

'MyComp'+index"はユニークなものなのに配列になってしまい[0]をつけてアクセスしなければいけないところが少し違和感感じます。

英語が苦手なので、少し分かりませんが記事の中で

No I meant: In my opinionVueJS should force users to always use unique IDs. Even inside for-loops. Because that’s what IDs are for.

このように、ユニークなidを使うようVueは強いるべきだという発言もあって
つまりrefが配列じゃなくて、同じrefは上書きされていってしまうという仕組みにすることによって、ユニークなidを使わざるを得ないようにするべきだという意味に思えます。
refがv-forの中で配列になることに対するアンチ発言なのでしょうか。

---

いくつか自分が思いついたことを回答に追加してみました。
ご意見頂けたら幸いです。

Answer 1

<div v-for="(item, index) in items">
  <div @click="onClick(index)" ref="MyComp"></div>
</div>

onClick = (index) => {
  let width = this.$refs.MyComp[index].clientWidth
}

[0]が気持ち悪いなら、一応こうすることで解決することができそうです。
ただ実際indexが引数として渡ってくるだけでは、困ることもあると思います。
以下のようにitem.idとrefを使いたいパターン。

<div v-for="(item, index) in items">
  <div @click="onClick(item.id)" :ref="MyComp_ + item.id"></div>
</div>

onClick = (id) => {
  // do something by using id

  let width = this.$refs["MyComp_" + id][0].clientWidth
}

あとはこのような書き方も一応できる気がしますが

<div v-for="(item, index) in items">
  <div @click="onClick(item.id , index)" ref="MyComp"></div>
</div>

onClick = (id , index) => {
  // do something by using id

  let width = this.$refs.MyComp[index].clientWidth
}

どの方法が一番綺麗なのか、分からないです