title: Vuetify v-data-table , how to render header text in HTML?
body: <p><a href="https://vuetifyjs.com/en/components/data-tables#introduction" rel="noreferrer">Vuetify documentation</a> suggests to pass an <code>object</code> array for headers that has a <code>text</code> attribute like so: </p>
  
  <pre><code>[{
      text: string;
      value: string;
      align: 'left' | 'center' | 'right';
      sortable: boolean;
      class: string[] | string;
      width: string;
  }]
  </code></pre>
  
  <p>But if you pass:</p>
  
  <pre><code>[{
      text: string = "&lt;div&gt;Foo&lt;/div&gt;&lt;div&gt;Bar&lt;/div&gt;;
      value: string;
      align: 'left' | 'center' | 'right';
      sortable: boolean;
      class: string[] | string;
      width: string;
  }]
  </code></pre>
  
  <p>It won't render the HTML (it'll escape the text).</p>
  
  <p>So, how do I render <strong>HTML</strong>?</p>