title: TypeError: Cannot read property 'add' of undefined" Flatpickr & Vue.js
body: <p>I'm trying to wrap <a href="https://chmln.github.io/flatpickr" rel="nofollow noreferrer">flatpickr</a> into a custom Vue component which should then should send dates to an eventHub, however I can't seems to get it to work. Somehow flatpickr can't find the input field (I think)</p>
  
  <p>My wrapper component looks something like this: </p>
  
  <pre><code>&lt;template&gt;
  &lt;input type="text" id="flatpickr" placeholder="Select a range" /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  const Flatpickr = require("flatpickr");
  
  var defaultStart = new Date(new Date().setDate(new Date().getDate() - 10)).toISOString().slice(0, 10)
  var defaultEnd = new Date().toISOString().slice(0, 10)
  
  export default {
    name: 'DatePicker',
    props:['startDate', 'endDate'], // I don't really need this but I should pass data to all Children
    mounted() {
      new Flatpickr('#flatpickr', {
        dateFormat: "Y-m-d",
        mode: 'range',
        altInput: true, // Human Readable
        minDate: new Date().fp_incr(-60), // 60 days from today
        maxDate: defaultEnd,
        // defaultDate: [defaultStart, defaultEnd],
        // minDate: '2017-01-01', // 60 days from today
        // maxDate: '2017-05-05',
        // defaultDate: ["2017-02-02", "2017-04-04"],
        locale: { firstDayOfWeek: 1},
        onClose: function(selectedDates, dateStr, instance) {
          let startDate = selectedDates[0].toISOString().slice(0, 10);
          let endDate = selectedDates[1].toISOString().slice(0, 10);
          this.$emit('change', { startDate, endDate });  // emit to eventHub
        }
      })
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I've also tried to use <code>.class-name</code> but nothing. What am I doing wrong?</p>