title: Adding a class to Vue child component from a parent component
body: <p>I have a Vue component that has few child components (inputs of the same type).
  The number of inputs may vary and it depends on the user, But there is a requirement to have at least one input filled.
  So, for example, I may have 5 inputs, 4 of them can be empty and it still considered valid.</p>
  <p>My problem is that I want to add a red border around the first input in the list when all the inputs are empty.
  I check the inputs on the parent component.</p>
  <p>I have something like this in the parent component:</p>
  <pre><code>&lt;template&gt;
      &lt;custom-input v-for=&quot;(input, key) in inputs_num&quot; :key=key&quot; /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      data() {
          return {
              inputValues: [],
              inputs_num: 1
          }
      }
      methods: {
          checkInputs() { 
              const validInputsCounter = 0;
              this.inputValues.forEach((input) =&gt; {
                  if(input.trim().length &gt; 4) validInputsCounter++;
              });
  
              if(validInputsCounter == 0) {
                  // Add border to the first input in the list.
              }
          }
          ...
          ...
      }
  &lt;/script&gt;
  </code></pre>
  <p>I couldn't figure out how should I set the border for the first input only.</p>