title: VUE / VUETIFY - Auto-adjust height adding or removing items from list component "v-list-tile"
body: <p>I created a simple Contact list with an input to add the contact items but after I add a few items it's not resizing.</p>
  <p>I used this as an example and there is resizing but not in my code:
  <a href="https://v2.vuejs.org/v2/guide/list.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/list.html</a></p>
  <p>Could anyone help me with that?</p>
  <p>Here is the Codepen:</p>
  <p><a href="https://codepen.io/fabiozanchi/pen/qoBpgd" rel="nofollow noreferrer">https://codepen.io/fabiozanchi/pen/qoBpgd</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('contact-item', {
    template: '\
          &lt;v-list-tile-title&gt;\
            &lt;button @click="$emit(\'remove\')"&gt;&lt;v-icon class="remove-email-icon" color="red"&gt;remove_circle&lt;/v-icon&gt;&lt;/button&gt;\{{ title }}\
          &lt;/v-list-tile-title&gt;\
        ',
    props: ['title']
  })
  
  new Vue({
    el: '#contact-list',
    data: {
      newContact: '',
      contacts: [],
      nextContactId: 1
    },
    methods: {
      addNewContact: function() {
        this.contacts.push({
          id: this.nextContactId++,
          title: this.newContact
        })
        this.newContact = ''
      }
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://unpkg.com/vuetify@1.0.5/dist/vuetify.min.css" /&gt;
  
  &lt;script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vuetify@1.0.5/dist/vuetify.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="contact-list"&gt;
    &lt;v-app&gt;
      &lt;v-layout row&gt;
        &lt;v-flex xs12 sm6 offset-sm3&gt;
          &lt;v-card&gt;
            &lt;v-toolbar color="blue" dark&gt;
              &lt;v-toolbar-title class="text-xs-center"&gt;Contacts&lt;/v-toolbar-title&gt;
            &lt;/v-toolbar&gt;
            &lt;v-container&gt;
              &lt;v-text-field v-model="newContact" @keyup.enter="addNewContact" placeholder="Add new email contact email"&gt;&lt;/v-text-field&gt;
            &lt;/v-container&gt;
            &lt;v-divider&gt;&lt;/v-divider&gt;
            &lt;v-list class="resize-list"&gt;
              &lt;v-list-tile&gt;
                &lt;v-list-tile-content&gt;
                  &lt;v-list-tile-title is="contact-item" v-for="(contact, index) in contacts" :key="contact.id" :title="contact.title" @remove="contacts.splice(index, 1)"&gt;
                  &lt;/v-list-tile-title&gt;
                &lt;/v-list-tile-content&gt;
              &lt;/v-list-tile&gt;
            &lt;/v-list&gt;
          &lt;/v-card&gt;
        &lt;/v-flex&gt;
      &lt;/v-layout&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thank you!</p>