title: vuejs router-link blocks the bootstrap 4 modal in Firefox and IE
body: <p>I have a page devices.vue where have a button to add a new device using the bootstrap 4 modal. 
  This is the button that calls the modal, with is the component</p>
  
  <pre><code>&lt;li class="nav-item active "&gt;
    &lt;a class="nav-link g-color eda-button-new" 
      data-toggle="modal" 
      data-target="#exampleModalLong" 
      &lt;i class="icon-ede-plus nav-new-event-btn"&gt;&lt;/i&gt; 
      New Device
    &lt;/a&gt;
    &lt;app-new-device&gt;&lt;/app-new-device&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>In the same page devices.vue I have the list with all the devices and on each device I have a router-link to be edited.</p>
  
  <pre><code>&lt;div class="edit-icon"&gt;
      &lt;router-link :to="'/device/edit-device/' + device.rid"&gt;
          &lt;a class="nav-link" 
              data-toggle="modal" 
              data-target="#exampleEditModalLong"&gt;
              &lt;i class="ti-pencil-alt" 
                  aria-hidden="true" 
                  data-toggle="tooltip" 
                  data-placement="top" 
                  title="Edit Token"&gt;
              &lt;/i&gt;
          &lt;/a&gt;
      &lt;/router-link&gt;
      &lt;app-edit-device&gt;&lt;/app-edit-device&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The problem is the the "a" wrapped with router-link is blocking the edit modal to open. On create a new device I don't use router-link, but when I call the modal with the device info to be edited I have to use router-link to pass the <code>device.rid</code>.</p>
  
  <p>If I take delete the router-link, the edit modal works fine, but with it on, in Firefox,IE the modal doesn't show.</p>
  
  <p>Does anyone know what is happening, or how to make it to work? Why in Chrome works fine but in Firefox and IE the router is blocking the modal?</p>