title: Why keeps the "modal-backdrop fade show" exist when the concerning component is un-mounted and how should i "remove/disable" this div
body: <p><strong>Situation</strong></p>
  
  <p>I have a vue component which contains a child component that should show a modal. 
  When i toggle the <code>isShowModal</code> bool (via button or Vue devtools) the modal is shown. When i click the close button in the modal (or toggle the <code>isShowModal</code> in devtools),
  the modal is closed. So this works like expected so far. </p>
  
  <p>When i try to open the modal again by clicking on the button to open the modal, it doesn't work. I noticed that the <code>modal-backdrop</code> is still "exists" (as an invisible overlay). 
  I don't understand why this happens as the <code>modal-component</code> is unmounted. </p>
  
  <p>When i close the modal via devtools console with the command <code>$("#"+ idHere).modal("hide");</code> the modal, including the backdrop is hided. </p>
  
  <p>Note: i have some reasons why i want to mount/unmount the component to show/close the modal. For this reason is it not an option to fire evens to call the <code>$("#" + "idHere").modal("show/hide");</code>
  I tried the same with events, just for test purposes and than the modal incl. backdrop was hided perfectly. </p>
  
  <p>The code bellow is not the real code as it contains more logic than required for this question. The example code fits my code very well when it comes the parent/model toggle functionality.
  The template of the modal component is almost completely copied from my code.</p>
  
  <p><strong>Questions</strong> </p>
  
  <ul>
  <li>How can i close/remove/disable (whatever the correct term is) the backdrop when i unmount my modal component.</li>
  <li>Is the approach i use to mount/unmount components the way to go? </li>
  <li>Is it best practice to toggle modals like i do in Vue ?</li>
  </ul>
  
  <p><strong>Example code</strong></p>
  
  <p>Parent component example:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
        &lt;modal-component
          title = "Zone"
          v-if = "isShowModal"
                  :closeCallback = "() =&gt; { isShowModal = false }" /&gt;
  
          // Some button that toggles the isShowModal bool 
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      mounted() {
  
      },
      data() {
        return {
          isShowModal: false,
        }
      },
        showZoneNewModal: function(zone) {
              this.isShowModal = true;
          },
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Modal component example:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="modal fade in" :id="this._uid" style="display: none; padding-right: 17px;" data-backdrop="static"&gt;
      &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
                    &lt;button type="button" class="close" v-on:click="closeCallback()" aria-label="Close"&gt;
              &lt;span aria-hidden="true"&gt;×&lt;/span&gt;
                    &lt;/button&gt;
            &lt;h4 class="modal-title"&gt;{{ title }}&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;div class="form-horizontal"&gt;
              // some header content
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            // some body content
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      props: {
        closeCallback: { type: Function, required: true },
          }
      mounted() {
        $("#" + this._uid).modal('show');
      },
          beforeDestroy() {
        $("#" + this._uid).modal("hide");
      },
      }
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This line "spawns" the backdrop div. When i remove all other code from the template of the modal-component the issue is still there.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="modal fade in" :id="this._uid" style="display: none; padding-right: 17px;" data-backdrop="static"&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>I noticed that, for some reason 2 divs are spawned when the <code>modal-component</code> is mounted. no 1 looks like this in dev-tools:</p>
  
  <pre><code>&lt;div id="9" data-backdrop="static" class="modal fade in box-info show" style="display: block; padding-right: 17px;" aria-modal="true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>no 2 looks like this in dev-tools. This is also the one that stays "active/alive". I cant find a div with <code>modal-backdrop</code> class in one of my 2 components. (also cant find anything with grep). </p>
  
  <pre><code>&lt;div class="modal-backdrop fade show"&gt;&lt;/div&gt;
  </code></pre>