This little tweak will allow you to bind a certain css class to a VueJS component depending on state or props. Inactive is a style class that change the aspect of your component and can be tweaked using a props called inactive in this example :

<template>
  <p :class="{ inactive: item.status }">I can be inactive</p>
</template>

<script>
  export default {
    name: 'exempleComponent',
    props: {
      inactive: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<style>
  .inactive {
    color: red;
  }
</style>