Simple collapse /accordion component

I'm trying to troubleshoot this simple collapse/accordion component I made, the prop value seems to be ignored.

This is the full component

<template>
    <div :class="{ active: is_active }">
        <div @click="toggleContent">
            <slot name="title"></slot>
             //here is_active is false and  isActive is true
            {{ is_active }} {{ isActive }}
        </div>

        <transition
            enter-active-class="duration-300 ease-in-out"
            enter-from-class="transform opacity-0"
            enter-to-class="opacity-100"
            leave-active-class="duration-300 ease-in-out"
            leave-from-class="opacity-100"
            leave-to-class="transform opacity-0">
            <div v-if="is_active" >
                <slot name="content"></slot>
            </div>
        </transition>
    </div>
</template>
<script>
export default {
    props: {
        isActive: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            is_active: false
        }
    },
    methods: {
        toggleContent() {
            this.is_active = !this.is_active
        }
    },
    mounted() {
        this.is_active = this.isActive;
        //both show as false always
        console.log('prop', this.isActive, this.is_active);
    }
}
</script>

I thought that the prop values were accessible in the mounted() part so I don't understand why in the template I can see a true but in the mounted it always shows as false.

How can I fix it so that the prop is being considered, I already tried with a watch but that made a weird loop when trying to open a closed accordion.

This is how I use it

<div v-for="section in permission_sections">
//this section.is_open is true but the collapse isn't open
  <collapse :is-active="section.is_open">
    <template v-slot:title>//</template>
    <template v-slot:content>//</template>
  </collapse>
</div>