simple-vue-vuetify-test.html

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <input v-model="myinput">
  <v-app>
    <v-toolbar dense dark color="blue darken-2">
      <v-toolbar-side-icon disabled></v-toolbar-side-icon>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>file_download</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>edit</v-icon>
      </v-btn>
    </v-toolbar>
    <v-container fluid grid-list-lg>
      <v-layout row wrap>

        <v-flex xs12 v-for="(item, index) in list" :key="index">
          <v-card>
            <v-card-text class="grey--text">
              {{item}}
            </v-card-text>
            <v-card-actions>
            </v-card-actions>
          </v-card>
        </v-flex>

        <div v-for="item in list2.contributors">
          {{item}}
        </div>

      </v-layout>
    </v-container>
    <v-btn @click="loadData()">Load data</v-btn>
  </v-app>
</div>


<script>
const vueapp = new Vue({
  el: '#app',
  data: {
    myinput: "a,b,c",
    list2: "Loading ..."
  },
  computed: {
    list() {
      return this.myinput.split(",")
    }
  },
  methods: {
    async loadData() {
      const resp = await axios("http://localhost:5000/package.json")
      this.list2 = resp.data
    }
  }
})
vueapp.loadData()
</script>