<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<h3>Vuetify Change color of v-chip on click </h3>
<v-chip :color="isClicked1 ? 'primary' : 'secondary'" @click="isClicked1 = !isClicked1">
<v-icon> mdi-check</v-icon>
<v-chip :color="isClicked2 ? 'red' : 'dark'" @click="isClicked2 = !isClicked2">
<v-icon>mdi-heart</v-icon>
<v-chip :color="isClicked3 ? 'green' : 'yellow'" @click="isClicked3 = !isClicked3">
<v-icon>mdi-tree</v-icon>
<v-chip :color="isClicked4 ? 'blue' : 'pink'" @click="isClicked4 = !isClicked4">
<v-icon>mdi-water</v-icon>
<v-chip :color="isClicked5 ? 'red' : 'orange'" @click="isClicked5 = !isClicked5">
<v-icon>mdi-flower</v-icon>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>