Functions on mixin is not being recognize by component

Hi Iam using laravel 8 and vue.js

so my problem is that the functions on my mixin is not being recognize

this is QuestionMixin.js

export default {
data(){
    return{
        ifClicked:true,
        items:[
            {
                answer:null,
                choices:[],
                question:null
            },
        ]
    }
},
methods:{
    AddQuestion:function(){
        var insert = {
            answer:null,
            choices:[],
            question:null
        }
        this.items.push(insert);
    },
},

}

and here is my component

<template>
<section id="q-main">
    {{ ifClicked }}

</section>
</template>

<script>
import QuestionMixin from "./mixins/QuestionMixin";
import QuestionHolderComponent from "./QuestionHolderComponent.vue";

export default {
    components:{
        'QuestionHolderComponent':QuestionHolderComponent
    }, 
    
    mounted() {
        
    },
    mixins:['QuestionMixin'],


}
</script>

and this is the error i recieved

[Vue warn]: Property or method "ifClicked" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> at resources/js/components/QuestionComponent.vue ``