bind your attribute like this:

<button type="button"
    class="btn btn-primary"
    @click="getCheckedBoxes"
    :data-product="prodObj.product"
    data-dismiss="modal"
    id="productsModalButton"
>
    Save changes
</button>

if you don’t have prodObj in your component, consider using vue props

I have a button that closes a modal and gathers values from a radio button selection (which the modal contained).

<button type="button" class="btn btn-primary" @click="getCheckedBoxes" data-dismiss="modal" id="productsModalButton">Save changes</button>

The button itself has attributes that are dynamically inserted when the modal is opened.

document.getElementById("productsModalButton").setAttribute("data-product", prodObj.product);

No problems there
However, every time the button is rendered after dynamically being updated the Vue on click event handler disappears. I have not explicitly removed the event handler from the button as the only thing that makes the button dynamic is that attributes such as the one above are added to it.
On the other hand, if I remove the Vue @click handler and make it a standard javascript function such as

<button type="button" class="btn btn-primary" onclick="getCheckedBoxes" data-dismiss="modal" id="productsModalButton">Save changes</button>

then move the function to a standard external js file it works fine. I’ve had to use this work around before and so i would really like to know if you could please tell me why this is happening so i don’t have to keep using the work around? many thanks