How to use reference in vuejs 3 inside for loop - vuejs3

Question

I've been developing my first project with Vue3 js.I have tried to implement vue-signature pad inside for loop.I thnik vue signature pad is working based on ref. I have done vue-signature pad with out loop. But i dont know how to use ref inside loop. Anybody please help how to implement signature pad inside loop using vue3. Thank you in advance.
<template>
<div
class="row"
v-for="(applicants, index) in applicant_details"
:key="index"
>
<div class="col-sm-4">
<div class="form-group">
<p>Signature for {{ applicants.first_name }}</p>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<VueSignaturePad ref="" />
<button type="button" #click="undo1" class="btn btn-warning">
Undo
</button>
</div>
</div>
<div class="col-sm-2" style="margin-top: 40px; text-align: center">
<div class="form-group">
<button type="button" #click="undo" class="btn btn-danger">
Clear
</button>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<button type="button" #click="save_signature" class="btn btn-success">
Save
</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
applicant_details: [
{ first_name: 'john', signature: '' },
{ first_name: 'david', signature: '' },
],
};
},
methods: {
undo() {
//will undo the signature
},
save_signature() {
//Save the signature
},
},
};
</script>

Answer 1

Be carefull, you have some issue with your code to begin with.
No template for you html
export default not well formated
List item
You original issue may be in --> v-for="(applicants, index) in 'applicant_details'"
Here it loop on the STRING 'applicant_details'. If you want to loop on a variable in your data juste use applicant_details.
U can also use vite.new/vue to create reproductive code and help us to help you.
Here is the corrected code : https://stackblitz.com/edit/vitejs-vite-9kvde4?file=src%2FApp.vue&terminal=dev