References to access methods in a v-for fail (vue 2)

[YerlinMatu]

 <v-col
    cols="12"
    v-for="(signature, index) in formData.signatures"
    :key="index"
  >
        <VPerfectSignature
          width="100%"
          height="300px"
          :stroke-options="strokeOptions"
          :ref="`signatures${index}`"
        />
       <v-btn  @click="$refs[`signatures${index}`].clear()">Clear</v-btn>
 </v-col>

ERROR:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: _vm.$refs[("signatures" + index)].clear is not a function"

vue.runtime.esm.js?2b0e:1897 TypeError: _vm.$refs[("signatures" + index)].clear is not a function

[wobsoriano]

https://v2.vuejs.org/v2/api/#ref

It wasn't able to find the appropriate element. To fix this, update your button click like this

<v-btn @click="clearSignature(`signatures${index}`)">

clearSignature(index: string) {
  if (this.$refs[index]) {
    this.$refs[index].clear()
  }
}