Put the boolean into a data field, and then the condition check into a computed function.

…updated to add context

export default {
    data: () => {
        ...
        isBlue: Boolean,
        isGreen: Boolean,
    },
    computed: 
        isBlue() {
            if (is it blue?) return true;
            return false;
        },
        isGreen() {
            if (is it green?) return true;
            return false;
        }
}

<template>
    ...
    <div class="cube" :class="{ isBlue ? 'cube--blue' : 'cube--green': isGreen }">
    <!-- I think this is where you went wrong: "'cube--blue': isBlue ? 'cube--green': isGreen" see note -->
</template>

note

You have a "?" separating your classes which should either be a comma, or you are trying to do a ternary operation. Comma separation could possibly apply both at once and I suspect you don’t want that. Or if you are trying to do conditional class assignment:

Fix your ternary syntax:

`condition ? value if true : value if false`

you are missing the
: value if false portion

What you probably want is:

`:class="isBlue ? 'cube--blue' : 'cube--green'"

Lastly

Now that I’ve written this out I sort of feel like I should recommend a different approach. Assuming that this cube is either green OR blue, but never both at the same time, you might want to combine the logic into a single step. Perhaps you want to use a conditional inside of a getColor function? This is particularly smart if you will ever have more than two colors. Then the fn just returns a color and you can interpolate that into your class name like:

<div :class="`cube--${color}`"></i>

I can’t understand what do you mean by ‘or’.

By looking at your data just type:

<div class="cube" :class="{ 'cube--blue': isBlue, 'cube--green': isGreen }">

Update:
Kraken meant to change you approach to:

<div class="cube" :class="`cube--${getColor}`">

and in your data just type:

data() {
  return {
    color: 'blue',
  };
},
computed: {
  getColor() {
    return this.color;
  },
},

With this approach you prepare yourself for maybe more colors in the future. By just updating this.color.

<li
   v-for="item in items"
   :key="item.id"
   class="nav-item"
   :class="{ dropdown: hasChildren(item.children) }"
 >
   
 methods: {
    hasChildren(item) {
      return item.length > 0 ? true : false;
    },
 }

I think this is the best way to solve this problem.

<div class="checkbox-wrapper">
  <div :class="[isInsurancePictureRequired === 'yes' ? 'custom-checkbox-active' : '', 'custom-checkbox']">
      <label class="pic-required-checkbox-label" for="yes">
     <input type="radio" id="yes" name="picture-require" value="yes" @click="handleCheckBox" checked>
    <span class="checkmark"></span>
     Yes
  </label>
</div>