title: Vue.js Not updating the class css items when data changes
body: <p>I am having a problem updating my shown class when the data changes.</p>
  
  <p>I have a servers array that calls to get the server status every 10 seconds.  If the data changes, the data changes, but the class doesn't</p>
  
  <p>The part that isn't changing is showing the font-awesome icon based on the status
  'fas fa-exclamation-triangle critical' : 'fas fa-check ok'"></p>
  
  <p>The text does change  {{server.status}} just not the font-awesome class in the if statement.</p>
  
  <p>Any ideas on what I need to change to get it to show correctly?</p>
  
  <pre><code>&lt;tr v-for="server in servers"&gt;
      &lt;td&gt;
        {{server.name}}
        &lt;a v-bind:href="server.url" target="_blank"&gt;{{server.url}}&lt;/a&gt;
      &lt;/td&gt;
      &lt;td style="min-width: 125px"&gt;
        &lt;i :class="server.status === 'CRITICAL' ? 'fas fa-exclamation-triangle critical' : 'fas fa-check ok'"&gt;&lt;/i&gt;
        {{server.status}}
      &lt;/td&gt;
      &lt;td&gt;{{server.revision}}&lt;/td&gt;
      &lt;td&gt;{{server.notify}}&lt;/td&gt;
      &lt;td&gt;{{server.count}}&lt;/td&gt;
  
    &lt;/tr&gt;
  
      &lt;script&gt;
    import axios from 'axios'
  
    export default {
      name: 'ServerMonitor',
      data() {
        return {
          servers: []
        }
      },
      created() {
        this.fetchData();
      },
      mounted: function () {
        setInterval(function () {
          this.fetchData();
        }.bind(this), 10000)
      },
      methods: {
        fetchData() {
          axios.get('https://SERVER/serverinfo')
            .then((resp) =&gt; {
              this.servers = resp.data[0].servers;
            })
            .catch((err) =&gt; {
              console.log(err);
            })
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Also I have tried it without the :class like this:</p>
  
  <pre><code>&lt;i v-if="server.status === 'CRITICAL'" class="fas fa-exclamation-triangle critical"&gt;&lt;/i&gt;
  &lt;i v-if="server.status === 'OK'" class="fas fa-check ok"&gt;&lt;/i&gt;
  </code></pre>