title: Vuetify - how to create a nested multi-select box
body: <p>I'm trying to create a multi-select box with Vuetify that allows the user to select the <code>header</code> and by selecting the <code>header</code> they would select everything that is child to that.</p>
  
  <p><a href="https://zon-ship-trimakas.c9users.io/" rel="nofollow noreferrer">Here is an example:</a> if you click on the "choose your countries" you'll see <code>Europe</code> BUT its just a title for now. I'd like to make that another checkbox that if selected would then choose all the countries under Europe.</p>
  
  <p>Here is my code so far on the multi-select</p>
  
  <pre><code>&lt;v-select
    label="Choose your Countries"
    :items="countries"
    v-model="country_selects"
    item-text="name"
    item-value="value"
    multiple
    chips
    hint="What are the target regions"
    persistent-hint
    autocomplete
  &gt;&lt;/v-select&gt;
  </code></pre>
  
  <p>And then the data in my <code>script</code> section</p>
  
  <pre><code>data: function () {
  return {
    name: '',
    email: '',
    select: null,
    items: [
      'Item 1',
      'Item 2',
      'Item 3',
      'Item 4'
    ],
    country_selects: [],
    countries: [
      {header: "Europe"},
      {name: "Afghanistan", value: "AF"},
      {name: "Second", value: "DF"},
      {header: "Second"},
      {name: "Charlotte", value: "AF"},
      {name: "North Carolina", value: "DF"},       
      ],
  </code></pre>
  
  <p>So far I found the <code>header</code> key but I need to turn it into a checkbox. Any ideas?</p>