title: How to set chip color individually
body: <p>I have created an input field that only accepts valid email addresses and put each address within a chip. If it saw an invalid email, the chip's color of that input is set to red. However, when it sees an invalid email, all chips turns red (see images below). How do I set only the invalid email chip's color to red?</p>
  
  <p><a href="https://i.stack.imgur.com/qYrn7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qYrn7.png" alt="valid email address"></a></p>
  
  <p><a href="https://i.stack.imgur.com/jQO2n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jQO2n.png" alt="invalid email address"></a></p>
  
  <p>Here's my code:</p>
  
  <p>template:</p>
  
  <pre><code>&lt;template&gt;
  &lt;v-combobox v-model="chips"
              label="Emails"
              chips
              clearable
              solo
              :rules="emailRules"
              multiple&gt;
      &lt;template v-slot:selection="data"&gt;
          &lt;v-chip :selected="data.selected"
                  close
                  :color="color"
                  @input="remove(data.item)"&gt;
              &lt;strong&gt;{{ data.item }}&lt;/strong&gt;&amp;nbsp;
          &lt;/v-chip&gt;
      &lt;/template&gt;
  &lt;/v-combobox&gt;
  </code></pre>
  
  <p></p>
  
  <p>script:</p>
  
  <pre><code>&lt;script&gt;
  export default {
      data() {
          return {
              color: '',
              value: false,
              chips: [],
              emailRules: [
                  v =&gt; {
                      if (!v || v.length &lt; 1)
                          return 'Input is required';
                      else if (v.length &gt; 0) {
                          for (let i = 0; i &lt; v.length; i++) {
                              if (!(/^(([^&lt;&gt;()\[\]\\.,;:\s@"]+(\.[^&lt;&gt;()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/.test(v[i]))) {
                                  this.color = "red";
                                  return 'Invalid email';
                              } else {
                                  this.color = "gray";
                              }
                          }
                      }
                      else return true;
                  }
              ]
          }
      },
  
      methods: {
          remove(item) {
              this.chips.splice(this.chips.indexOf(item), 1)
              this.chips = [...this.chips]
          }
      }
  }
  </code></pre>
  
  <p></p>
  
  <p>I'm new to VueJS so I don't really know how stuff works here, and I saw nothing in the net that could help me. Anyway, thanks!</p>