title: Vuetify v-alert not showing when reactive property is updated
body: <p>I want to conditionally render a v-alert if the login response code equals 401 Unauthorized. I have the alert defined below:</p>
  
  <pre><code>&lt;v-alert v-if="this.show" type="error"&gt;Invalid email and/or password.&lt;/v-alert&gt;
  </code></pre>
  
  <p>In the data section of my component, I define the property <code>show</code> which is by default set to false to not show the v-alert:</p>
  
  <pre><code>export default {
    name: "logincomponent",
    data() {
      return {
        user: {},
        show: false,
      };
    },
  </code></pre>
  
  <p>In the methods section of my component, I attempt user authentication and if the status code equals 401, I update <code>this.show = true</code>:</p>
  
  <pre><code>methods: {
      login: function() {
        let user = {
          email: this.user.email,
          password: this.user.password
        };
        authService.login(user).then(auth =&gt; {
          if (auth.response.status === 401) {
            this.show = true;
          }
        });
      }
    }
  </code></pre>
  
  <p>I would have thought this to work as <code>show</code> is reactive since it's defined in the <code>data()</code> section of my component.</p>
  
  <p>Any idea what I can do to get this conditionally rendering properly? </p>
  
  <p>Many thanks in advance,<br>
  Chappie Johnson </p>