title: How to add a click event on Vuetify headers?
body: <p>I have more than 5 tables.
  I would like to add a click event on "v-data-table" 
  headers that would be in charge of updating data source.</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
        &lt;v-data-table
          :headers="headers"
          :items="items['America']"
          :custom-sort="customSort"
          @click="registerPlace('America')"
        &gt;
        &lt;v-data-table
          :headers="headers"
          :items="items['Europe']"
          :custom-sort="customSort"
          @click="registerPlace('Europe')"
        &gt;
  &lt;/template&gt;
  
  export default {
    data() {
      return {
        current_place: null,
  
        headers: [...],
        items: [...]
      }
    },
    mounted() {
      this.getTablesData();
    },
    methods: {
      registerPlace(place) {
          this.current_place = place;
      },
      customSort(items, sortBy, desc) { ... }
    }
  }
  </code></pre>
  
  <p>Is there a way to have a callback function triggered by
  click on table headers?
  The above does not work.</p>