So i am making a small list in which i have a list of car companies and an option for users to select their favorite one. I have an array of objects which returns the name and a certain property named `starred`. I have a method `setStarred` which sets the `starred` of selected to true. But what i am trying to achieve is to have the option to only select one at a time, so if i select `BMW`, the starred for other two should be toggled to false. Right now i can toggle all of them at the same time.

Please check this working [codepen](https://codepen.io/treehuggerrick/pen/eYJzGar?editors=1011).

Check out the working example below:-

```js
new Vue({
  el: '#app',
  data() {
    return {
      cars: [{
          name: 'Toyota',
          starred: false
        },
        {
          name: 'BMW',
          starred: false
        },
        {
          name: 'Ford',
          starred: false
        }
      ]
    }
  },
  methods: {
    setStarred(item) {
      item.starred = !item.starred
    }
  }
})
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<link rel="stylesheet"  href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout justify-center column>
        <v-flex xs6 v-for="(car,index) in cars" :key="index">
          <h2>{{car.name}}
            <v-icon :color="car.starred ? 'primary': '' " @click="setStarred(car)">star_border
            </v-icon>
          </h2>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>
```

Any help will be appreciated. Thank you.