Trying to find a solution for the issue of having a unique reference to the modal within this loop. I attempted giving the ref a grade.id at the end, but it didn't work with String interpolation and the b-modal ref. I also tried using :ref.
Below is the code in the Vue file, along with a screenshot illustrating how when I click to delete a grade, it displays all the modals because the modal is inside a loop.
<template>
<div>
<b-form @submit="onSubmit" @reset="onReset">
<b-row>
<b-col class="underline">Add Grades</b-col>
</b-row>
<br />
...
// rest of the template code
...
<p>
Confirm that you are about to delete grade
{{ getTitle(grade) }}
</p>
</b-modal>
</span>
</b-card-text>
</b-card>
</b-card-group>
</div>
</div>
</template>
// Script section here...
// Style section here...