How to apply conditional style to unchecked checkbox - vuejs2

Question

We are running Vue 2.x with vuetify and trying to figure out how to set some conditional, custom styling for unchecked checkboxes on a table for viewing/creating/updating user permissions. The roles are defined something like this:
Role A View and Role B Edit are being added. The gray boxes are permissions that have not changed. This is working as desired.
The issue is that I can't figure out how to assign color/style/class to the unchecked boxes so that we can mark revoked permissions with an empty red checkbox so that if manage were unchecked the last row would look like:
We are using but have also tried css overrides on . We have tried using css classes, :color, :fill, :style but nothing is working to get the box outline red.
This is what we currently have and is working for the checked boxes:
<template v-slot:item.view.id="{ item }">
<v-simple-checkbox
v-if="item.view.id"
v-model="item.view.active"
:disabled="!edit"
:color="getCheckboxColorForRole(item.view)"
#click="updateRolesRow(item, 'view')"
>
</v-simple-checkbox>
</template>
where getCheckboxColorForRole compares the initial vs current state and returns the appropriate color to display.
What am I missing here?

Answer 1

can you please provide some code? basically this is style binding

Answer 2

per #Anatoly I looked into the scoped css again and was able to get it to work. But then made it a global css rule so that I can use the scss var for the color and apply this on other pages. This is what I ended up with:
<template v-slot:item.view.id="{ item }">
<v-checkbox
v-if="item.view.id"
v-model="item.view.active"
:disabled="!edit"
:color="getCheckboxColorForRole(item.view)"
:class="[{'group-role-checkbox-original-checked': item.view.originalActive}]"
:ripple="false"
#click="updateRolesRow(item, 'view')"
>
</v-checkbox>
Had to switch it to <v-checkbox> since the simple checkbox wasn't allowing me to add classes. Then I checked/unchecked a few times and noticed that the only change is that the gray--text class is removed when unchecked. So then I added this css rule:
.group-role-checkbox-original-checked i:not(.gray--text) {
color: $anchor-color !important;
}
If anyone knows of a better way to do this I would love to know.