Question: How to select a value by default in Material UI Autocomplete?

defaultValue does not work.

In this example, I would like to show the option as default and show it as selected.

```
  {
    id: "flying",
    name: "Flying"
  },

```

<https://codesandbox.io/s/vj4fj?file=/src/App.js>

Answer: 
Uses one computed property is one solution.

Once gets new data from the API, uses `Array.concat` or `...` operator to merge into current data property.

Then in computed property, uses one `Array.reduce` to get the expected output.

```js
new Vue({
  el: '#app',
  data () {
    return {
      items: []
    }
  },
  computed: {
    computedItems: function () {
      return this.items.reduce((pre, cur) => {
        if (!(cur.letter in pre)) pre[cur.letter] = []
        pre[cur.letter].push(cur)
        return pre
      }, {})
    }
  },
  methods: {
    getItemsFromAPI: function () {
      setTimeout(() => {
        this.items = [...this.items, ...[
            { letter: "A", name: "Albert" },
            { letter: "A", name: "Archer" },
            { letter: "B", name: "Blade" },
            { letter: "B", name: "Birdie" },
        ]]
      }, 1000)
    },
    getItemsFromAPI1: function () {
      setTimeout(() => {
        this.items = [...this.items, ...[
            { letter: "C", name: "Albert" },
            { letter: "C", name: "Archer" },
            { letter: "D", name: "Blade" },
            { letter: "D", name: "Birdie" },
        ]]
      }, 1000)
    }
  }
})
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <button @click="getItemsFromAPI()">Load Data</button>
    <button @click="getItemsFromAPI1()">Load Data (new letter)</button>
    <section v-for="(group, key) in computedItems" :key="key">
        <div>{{key}}</div>
        <div v-for="(item, index) in group" :key="index">
        {{index}}: {{item.name}}
        </div>
    </section>
</div>
```
I am not sure that I understand you exactly but I think you want this.

```
<div v-for="item in list">
      <div v-for="person in Object.keys(item)">{{item[person]}}</div>
</div>

```