<div id="app">
  <v-app id="inspire">
    <v-row>
      <v-col cols="12" sm="4" offset-sm="4">
        <v-card>
          <v-card-title class="blue white--text">
            <span class="headline">Menu</span>
          </v-card-title>
          <v-container
            id="scroll-target"
            style="max-height: 200px"
            class="overflow-y-auto"
          >
            <v-row
              v-scroll:#scroll-target="onScroll"
              align="top"
              justify="center"
            >
              <v-list width="100%" style="text-align: center">
                <v-list-item
                  v-for="(item, i) in items"
                  :key="i"
                  @click="message(item.title)"
                >
                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-row>
          </v-container>
        </v-card>
      </v-col>
    </v-row>
    <v-snackbar timeout="3000" v-model="snackbar">
      {{snackbar_msg}}
    </v-snackbar>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return{
      items: [],
      snackbar: false,
      snackbar_msg: ""
    }
  },
  methods: {
    message(msg){
      this.snackbar_msg = msg
      this.snackbar = true
    },
    createItems(amount){
      for(let i=0; i<amount; ++i){
        let hash = { title: 'Item #'+i } 
        this.items.push( hash )
      }
    }
  },
  mounted() {
    this.createItems(10)    
  }
})