How to track the appearance of a modal window?

Question

JavaScript

With the help of vue.js, I made a component that appears on the page when the button is clicked. The required data is loaded into it. I want to make the window draggable. To do this, I connected jquery and I want to set drag and drop for the window with a script.
But since the condition for opening the window is v-if, the script does not work (it works with v-show, but it cannot be used because the data is loaded when the window is opened).
How to make a drag and drop window?
Or how to track the opening of a window and assign it a drag?

<script  type="text/x-template" id="modal-template">
   <transition  name="modal">
       <div  id="drag" class="SearchInfoModal ui-widget ui-corner-all ui-state-error" role="dialog" aria-hidden="false" style="display: block;">
       <div  class="modal-dialog"><!--  -->
       <div class="modal-content">
         <div class="modal-body">
             ${pk} ${ids}
       </div>
       </div>
       </div>
   </transition>
   </script>

<modal v-if="showModal" @close="showModal = false"
        :pk="mod[0].id"
        :ids="selecte"
</modal>

$(function() {
  $('#drag').draggable();
});

Answer 1

Try calling the jQuery plugin initialization in the section mounted()of the modal window.
(moved from comments to the question)

Answer 2

There is a ready-made good component - vue-js-modal.yev.io
drag and drop is present