title: Calling a javascript function inside a vue component file
body: <p>I have a simple component file to submit a form, and I have a javascript function to perform an action:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
         &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Create Job&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;form method="post" @submit.prevent="signIn" @keydown="errors.clear($event.target.name)"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Job Name&lt;/label&gt;
                      &lt;input type="text" class="form-control" placeholder="Web Developer" v-model="name"&gt;
                      &lt;span v-text="errors.get('name')" class="text-danger help-block"&gt;&lt;/span&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Job Summary&lt;/label&gt;
                      &lt;textarea class="form-control" v-model="summary"&gt;&lt;/textarea&gt;
                      &lt;span v-text="errors.get('summary')" class="text-danger help-block"&gt;&lt;/span&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group"&gt;
  
                      &lt;div class="col-sm-6" style="padding-left: 0px;"&gt;
                          &lt;label&gt;Salary Type&lt;/label&gt;
                          &lt;select class="form-control" v-model="salarytype"&gt;
                              &lt;option value=""&gt;Select an option&lt;/option&gt;
                              &lt;option value="hourly"&gt;Hourly&lt;/option&gt;
                              &lt;option value="weekly"&gt;Weekly&lt;/option&gt;
                              &lt;option value="fortnightly"&gt;Fortnightly&lt;/option&gt;
                              &lt;option value="monthly"&gt;Monthly&lt;/option&gt;
                          &lt;/select&gt;
                          &lt;span v-text="errors.get('salarytype')" class="text-danger help-block"&gt;&lt;/span&gt;
                      &lt;/div&gt;
  
                      &lt;label&gt;Salary&lt;/label&gt;               
                      &lt;div class="col-sm-6 input-group"&gt;
                          &lt;input type="number" v-model="salaryfrom" class="form-control" placeholder="24,000""&gt;
                          &lt;span class="input-group-addon"&gt;-&lt;/span&gt;
                          &lt;input type="number" v-model="salaryto" class="form-control" placeholder="34,000"&gt;
                          &lt;span v-text="errors.get('salaryfrom')" class="text-danger help-block"&gt;&lt;/span&gt;
                          &lt;span v-text="errors.get('salaryto')" class="text-danger help-block"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group col-sm-6" style="padding:0px;"&gt;
                      &lt;label&gt;Job Location&lt;/label&gt;&lt;br/&gt;
                      &lt;select class="form-control" v-model="location" @change="onChange($event.target.value)"&gt;  
                          &lt;option&gt;Select an option&lt;/option&gt;
                          &lt;option v-for="(value, key) in countries" :value="key"&gt;{{ value }}&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;span v-text="errors.get('location')" class="text-danger help-block"&gt;&lt;/span&gt;
                  &lt;/div&gt;
  
                  &lt;div class="form-group col-sm-6"&gt;
                      &lt;label&gt;Contact Details&lt;/label&gt;
                      &lt;input type="email" v-model="contactemail" class="form-control" placeholder="John Doe"&gt;
                      &lt;span v-text="errors.get('contactemail')" class="text-danger help-block"&gt;&lt;/span&gt;
                  &lt;/div&gt;
  
                  &lt;label&gt;Contact Number&lt;/label&gt;   
                  &lt;div class="form-group input-group"&gt;
                      &lt;span class="input-group-addon"&gt;
                          &lt;i class="fa fa-phone"&gt;&lt;/i&gt;
                      &lt;/span&gt;
                      &lt;input type="tel" v-model="contactphone" class="form-control" placeholder="+4407584457483"&gt;
                      &lt;span v-text="errors.get('contactphone')" class="text-danger help-block"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-info btn-fill btn-wd" v-on:click="addJob"&gt;Save&lt;/button&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
      class Errors
      {
          constructor()
          {
              this.errors = {};
          }
  
          get(field){
              if(this.errors[field]){
                  return this.errors[field][0]
              }
          }
  
          any(){
              console.log(Object.keys(this.errors).length);
              return Object.keys(this.errors).length &gt; 1;
          }
  
          record(errors){
              this.errors = errors;
          }
  
          clear(field){
              delete this.errors[field];
          }
      }
  
      export default
      {
          data: function () 
          {
              return {
                  countries: [],
                  name: '',
                  summary: '',
                  salarytype: '',
                  salaryfrom: '',
                  salaryto: '',
                  location: '',
                  contactemail: '',
                  contactphone: '',
                  errors: new Errors()
              }
          },
  
          methods: 
          {
              addJob: function()
              {
                  axios.post('/jobs/create', this.$data)
                  .then(response =&gt; {
                      if(response.data.status === true){
                          $('#createJob').modal('hide');
                          getJobTable();
                      }
                      else{
                          formError = response.data.message;
                      }
                  })
                  .catch(error =&gt; this.errors.record(error.data))
              }
          },
  
          mounted: function()
          {
              axios.get('/countries')
                  .then(response =&gt; {
                      this.countries = response.data;
                  })
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>My js file in a file that is rendering the component vue file:</p>
  
  <pre><code>&lt;script&gt;
      $(function() {
          var getJobTable = function(){
              console.log('dt triggered');
              $('#all-jobs').DataTable({
                  processing: true,
                  serverSide: true,
                  ajax: '{!! route('job.datatable.usersjobs') !!}',
                  columns: [
                      { data: 'name', name: 'name' },
                      { data: 'summary', name: 'summary' },
                      { data: 'status', name: 'status' },
                      { data: 'applications', name: 'applications' },
                      { data: 'action', name: 'action' },
                  ],
                  initComplete: function () {
                      this.api().columns().every(function () {
                          var column = this;
                          var input = document.createElement("input");
                          $(input).appendTo($(column.footer()).empty())
                          .on('change', function () {
                              column.search($(this).val(), false, false, true).draw();
                          });
                      });
                  }
              });
          }
          getJobTable();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I access getJobTable(); inside my component file?</p>