title: vuejs datepicker rearrange my template setup
body: <p>i have try to insert vuejs datepicker in to my vue template but when i add the component it rearrange my template by shifting from right to left. affecting other html elements</p>
  
  <p>this is a picture of my template before adding the </p>
  
  <p><strong>This is my template BEFORE add datepicker</strong></p>
  
  <p><a href="https://i.stack.imgur.com/6GhHn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6GhHn.jpg" alt="enter image description here"></a></p>
  
  <p><strong>this is my template AFTER adding vuejs-datepicker</strong>
  <a href="https://i.stack.imgur.com/y5h2B.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y5h2B.jpg" alt="enter image description here"></a></p>
  
  <p>every tag has from right to left including my links and its icon swapping</p>
  
  <p>below is my code</p>
  
  <pre><code> &lt;div class="row pb-3 pt-5 bg-light"&gt;
        &lt;div class="col-md-8"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="distributor"&gt;Select Distributor&lt;/label&gt;
                     &lt;select class="form-control" id="distributor"&gt;
                        &lt;option&gt;M OSEI AKOTO ENT(NESTLE)&lt;/option&gt;
                     &lt;/select&gt;
              &lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
            &lt;div class="form-group"&gt;
               &lt;label for="stock_date"&gt;Date&lt;/label&gt;
                   **&lt;datepicker&gt;&lt;/datepicker&gt;**
  
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                 &lt;label for="stock_invoice"&gt;Stock Number&lt;/label&gt;
                 &lt;input type="text" class="form-control" name="stock_invoice_number" placeholder="stock invoice number"&gt;
            &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  
  
    &lt;script&gt;
  
      import moment from 'moment';
      import Datepicker from 'vuejs-datepicker';
  
      export default {
        name:'AddStocks',
        components: {
            Datepicker
        }
    &lt;/script&gt;
  </code></pre>
  
  <p>Every thing reverts to normal when i delete the Datepicker component.</p>
  
  <p><strong>style image</strong></p>
  
  <p><a href="https://i.stack.imgur.com/PB6lO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PB6lO.png" alt="enter image description here"></a></p>
  
  <p><strong>After checking the sytle i realize the datepicker component has been attached from my root tile div down to every single tag beneath i</strong>t</p>