The advantage of using vue is to build custom components. So you can try the method shown below.

WORKStackBlitz

You may need to adjust the code to your specific requirements.

<template>
  <div v-for="category in categories" :key="category.id">
    <div>
      <label class="form-label categoryInput">
        <span class="material-icons icon" v-if="isChecked(category.id)"
          >check_box</span
        >
        <span
          class="material-icons-outlined icon"
          v-if="!isChecked(category.id)"
          >check_box_outline_blank</span
        >
        <input
          type="checkbox"
          class=""
          @change="input()"
          :value="category.id"
          v-model="currentCategory"
        />
        {{ category.name }}</label
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'Checkbox',
  data: function () {
    return {
      currentCategory: [],
      categories: [
        { id: 1, name: 'alpha' },
        { id: 2, name: 'beta' },
      ],
    };
  },
  props: {},
  methods: {
    isChecked(categoryId) {
      return this.currentCategory.indexOf(categoryId) !== -1;
    },
    input() {
      var color = '#3bb0a8';
      let collection = document.getElementsByClassName('categoryInput');
      for (let i = 0; i < collection.length; i++) {
        const icons = collection[i].querySelectorAll('.icon');
        icons.forEach((iconEle) => {
          iconEle.style.color = color;
        });
      }
    },
  },
};
</script>

<style scoped>
label.categoryInput {
  display: flex;
  justify-content: center;
  align-items: center;
}
label.categoryInput input[type='checkbox'] {
  width: 0;
  height: 0;
}
</style>

important

Add the following to your index.html header

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

The default HTML checkbox tick mark color is determined by the browser and cannot be changed. However, you can create your own custom checkbox and style it however you want.

HTML

<label class="container">
    <input type="checkbox" checked="checked" />
    <span class="checkmark"></span>
</label>

CSS

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a teal background */
.container input:checked ~ .checkmark {
  background-color: #3bb0a8;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

JSFiddle