使用v-bind更新DOM元素的data-属性后无法使用jQuery.data()获取

Question

在做项目的时候遇到了一个棘手的问题，我使用vue的v-bind绑定DOM元素的data-属性，如下

<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 #' + idx"
   data-speed="700">
    <img :src="content.data" class="img-fluid w-100 mb-2">
</a>

本来预期很简单，就是data-属性随着vue对象数据的改变而改变，但是在运行中遇到一个问题，修改vue的data后，dom对象的dataset属性可以随之更改，而使用jQuery的data()方法则无法获取到data-属性的更新，如图：

更新前：

更新后（修改了 data-src,data-caption,data-fancybox 属性)：

可以发现dom原生的dataset属性已经发生了变更，但是用jQuery的data()方法查询依然获取的是原来的值。

求解！有办法用data()获取更新后的data-属性吗？因为用到的插件里使用data()方法获取元素属性，修改插件可能会出现更多bug....

Answer 1

Vue.nextTick(function () {
  // DOM 更新了
})

写在这里面看看

Answer 2

都用vue了 用Jquery的意义在哪里