title: Vuetify dynamically create v-select
body: <p>I am trying to create v-selects dynamically. As the user selects an option from the first v-select, another one should appear. Since v-selects are not html components I am having a lot of trouble appending new ones to the DOM. Here is the function that creates the new v-select.</p>
  
  <pre><code>makeNewSelect () {
    let newVSelect = document.createElement('div')
    let html = ` &lt;div role="combobox" class="v-input ma-2 v-text-field v-text-field--enclosed v-text-field--outline v-select theme--light"&gt;
                  &lt;div class="v-input__control"&gt;&lt;div class="v-input__slot"&gt;
                    &lt;div class="v-select__slot"&gt;&lt;label aria-hidden="true" class="v-label theme--light" style="left: 0px; right: auto; position: absolute;"&gt;Select&lt;/label&gt;
                      &lt;div class="v-select__selections"&gt;&lt;input aria-label="Select" readonly="readonly" type="text" autocomplete="on" aria-readonly="false"&gt;&lt;/div&gt;
                        &lt;div class="v-input__append-inner"&gt;
                          &lt;div class="v-input__icon v-input__icon--append"&gt;&lt;i aria-hidden="true" class="v-icon material-icons theme--light"&gt;arrow_drop_down&lt;/i&gt;&lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="v-menu"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="v-text-field__details"&gt;
                      &lt;div class="v-messages theme--light"&gt;
                        &lt;div class="v-messages__wrapper"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;`
    newVSelect.innerHTML = html
    document.getElementById('selectLayout').appendChild(newVSelect)
  },
  </code></pre>
  
  <p>I got this from inspecting the element of a v-select that already exists on the page. However, when you click to open the select, the classes change which I don't know how to do (or if it's possible) with the v-select that I created. Also, I need each v-select's v-model to be distinct so they don't all change when one does. Is any of this possible? Please help.</p>
  
  <p>EDIT: The data that will be used for the selects will be the same data for each dropdown. The data is retrieved on the beforeMount() and is stored in an array. </p>