title: property this.$el undefined on single file component vue js
body: <p>I'm trying to create a global component using laravel mix with vue js, but when accessing property <code>this.$el</code> it's undefined. Here's my component file:</p>
  
  <p>Datepicker.vue</p>
  
  <pre><code>&lt;template&gt;
  &lt;input 
      type="text" 
      :name="name" 
      :class="myclass" 
      :placeholder="placeholder"
      :value="value" /&gt;
  &lt;/template&gt;  
  
  &lt;script&gt;
  export default {
    props: ['myclass','name','placeholder','value'],
    data () {
      return {
  
      }
    },
    created () {
      console.log("this.$el", this.$el); //undefined
      console.log("this", this); //$el is defined
      var vm = this;
      var options = {
          "locale": "es",        
          "onChange": function(selectedDates, dateStr, instance) {
              vm.$emit('input', dateStr);
          }
        };
  
      $(this.$el)
        // init
        .flatpickr(options);      
    },
    destroyed(){
      console.log("destroyed");
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/NVY64.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NVY64.png" alt="Console"></a></p>
  
  <p>But, when the component is created as X-Template it works:</p>
  
  <p>client.js</p>
  
  <pre><code>Vue.component('date-picker', {
    props: ['myclass','name','placeholder','value'],
    template: '#datepicker-template',
    mounted: function () {
      var vm = this;
      var options = {
          "locale": "es",        
          "onChange": function(selectedDates, dateStr, instance) {
              vm.$emit('input', dateStr);
          }
        };  
  
      $(this.$el)
        // init
        .flatpickr(options);      
    },
    destroyed: function () {
      console.log("destroyed");
    }
  });
  </code></pre>
  
  <p>create.blade.php</p>
  
  <pre><code>&lt;script type="text/x-template" id="datepicker-template"&gt;
      &lt;input 
      type="text" 
      :name="name" 
      :class="myclass" 
      :placeholder="placeholder" /&gt;
  &lt;/script&gt;
  </code></pre>