Select a checkbox if there is already an answer from the backend in Vue 2

As the title says, I just want to select the options from a checkbox if there is an answer from my API.

The answer data is coming like this:

answer: "df8af185-dd0e-45e1-855e-5ace6a31cad2,da92b432-2753-466d-b21d-e84d35817309,62d8b1f6-4a44-486d-921e-f9867fbbaa0e"

Each selected option is separated by comas.

Now what I want to do, is check if I have this answer property, and if I have it just show the already selected options into the checkbox by ID.

This is my checkbox component:

<template>
    <div>
        <div v-for="(option, index) in options" :key="option.id" class="flex">
            <input 
                type="checkbox" 
                :value="option.id" 
                v-model="checkedNames"
                class="opacity-0 absolute h-6 w-6 cursor-pointer z-10"
                :disabled="answer"
            />
            <div 
                class="transition-all ease-in-out duration-500 group-hover:transform group-hover:scale-110 bg-gray-200 border-2 rounded-md border-gray-400 w-6 h-6 flex flex-shrink-0 justify-center items-center mr-2"
                :class="[checkedNames[index] && 'border-primary-600 bg-primary-600']"
            >
                <Icon name="tick" class="text-gray-200" :class="[checkedNames[index] && 'text-white']" />
            </div>
            <label :for="index" class="text-sm">{{ option.option }}</label>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'CustomCheckBox',
        props: {
            value: {
                required: true
            },
            options: {
                required: true,
                type: Array,
            },
            answer: String,
        },
         watch: {
            checkedNames(newValue) {
                this.$emit("input", newValue); 
            },
        },
        data() {
            return {
                checkedNames: this.answersArray ? this.answersArray : [],
            };
        },
        computed: { 
            answersArray() {
                if(this.answer) {
                    const splitted = this.answer.split(',');

                    return splitted;
                }
            }
        }
    };
</script>

As you can see, I've created a computed property which does a split() to the answers string and creates an array.

The problem is that I can't manage to show this array into the checkbox.

EDIT:

This is the options data that comes from my API.

[
  {
    "id": "df8af185-dd0e-45e1-855e-5ace6a31cad2",
    "option": "uno",
    "order": 0,
    "color": null
  },
  {
    "id": "da92b432-2753-466d-b21d-e84d35817309",
    "option": "dos",
    "order": 0,
    "color": null
  },
  {
    "id": "62d8b1f6-4a44-486d-921e-f9867fbbaa0e",
    "option": "tres",
    "order": 0,
    "color": null
  },
  {
    "id": "2da30d46-2f0c-4707-8f73-734dfe1cf7dd",
    "option": "cuatro",
    "order": 0,
    "color": null
  }
]