title: How does is-invalid bootstrap class work?
body: <p>I have an input, which works correctly: after errror was returned from server to client, I see <code>{{value}}</code>.</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label class="col-md-8 control-label"&gt;Foo&lt;/label&gt;
      &lt;input class="form-control" v-model="foo" :class="{' is-invalid': errors.foo}"&gt;
      &lt;div class="invalid-feedback" v-if="errors.foo"&gt;
          &lt;strong v-for="value in errors.foo"&gt;{{value}}&lt;/strong&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I guess, <code>div</code> with <code>class="invalid-feedback"</code> goes from <code>display: none</code> to <code>display: block</code> <strong>only when</strong> <code>div</code> which has <code>class="invalid-feedback"</code> <strong>is on the same DOM level</strong> with <code>&lt;input class="form-control is-invalid"&gt;</code>.</p>
  
  <pre><code>&lt;div&gt;
      &lt;input class="form-control" :class="{' is-invalid': errors.foo}"&gt;
      &lt;div class="invalid-feedback" v-if="errors.foo"&gt;
          &lt;!-- this example would work --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;div&gt;
      &lt;input class="form-control" :class="{' is-invalid': errors.foo}"&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;div class="invalid-feedback" v-if="errors.foo"&gt;
          &lt;!-- this example would not work
               because error div isn't on the same DOM level with input --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Am I right? Didn't found anything in <a href="https://getbootstrap.com/docs/4.0/components/forms/?#how-it-works" rel="nofollow noreferrer">docs</a> about DOM.</p>
  
  <p>If yes, what workaround is suitable for case when I want show error inside <code>div</code> with <code>class="invalid-feedback"</code>, but "connected" input isn't on the same DOM level? Actually I want to make my 2nd example work.</p>
  
  <p><strong>UPDATE:</strong> I can add some <code>&lt;div class="form-control" :class="{' is-invalid': errors.foo}" style="display: none;"&gt;</code> on the same DOM level where <code>&lt;div class="invalid-feedback"&gt;</code> is, but it'd be spaghetti code.</p>