Cannot be obtained using jQuery.data () after updating the data- attribute of a DOM element with v-bind

I encountered a thorny problem when working on a project. I used vue"s v-bind to bind the data- attribute of the DOM element, as follows

<a v-else class="js-fancybox" href="javascript："
   @click="updateGallery(idx)"
   :data-fancybox=""gallery"+activeWork"
   :data-src="content.data"
   :data-caption="workList[activeWork].title + " - image -sharp" + idx"
   data-speed="700">
    <img :src="content.data" class="img-fluid w-100 mb-2">
</a>

originally expected to be very simple, that is, the data- property changes with the change of the vue object data, but there is a problem in the operation. After modifying the data of the vue, the dataset property of the dom object can be changed accordingly, while the update of the data- property cannot be obtained by using the data () method of jQuery, as shown in figure

before updating :

data-src,data-caption,data-fancybox ):

you can find that the native dataset property of dom has changed, but the data () method of jQuery still gets the original value.

solve! Is there a way to get the updated data- property with data ()? Because the plug-in used uses the data () method to get element attributes, modifying the plug-in may result in more bug.