Laravel – [Vue warn]: Property "handleCreateClick" was accessed during render but is not defined on instance

The app is in laravel, vuejs. Used Laravel breeze for some functionalities. For a feature, a button should open a modal. But modal not opened, The error in the console –
[Vue warn]: Property "handleCreateClick" was accessed during render but is not defined on instance
No hit in the button specific actions in the vue devtool

Vuecode –

<template>
    <div v-if="showDialog">
        <div>
            <input v-model="taskName" type="text" id="taskName" placeholder="Task Name" required/>
            <template v-if="projects.length === 0">
            <input v-model="projectName" type="text" id="projectName" placeholder="Project Name" required/>
            </template>
            <template v-else>
            <select v-model="projectName" id="projectName" required>
                <option value="" disabled selected hidden>Project Name</option>
                <option v-for="project in projects" :value="project.id" :key="project.id">{{ project.name }}</option>
            </select>
            </template>
            <template v-if="users.length === 0">
            <input v-model="assignedTo" type="text" id="assignedTo" placeholder="Assigned To" required/>
            </template>
            <template v-else>
            <select v-model="assignedTo" id="assignedTo" required>
                <option value="" disabled selected hidden>Assigned To</option>
                <option v-for="user in users" :value="user.id" :key="user.id">{{ user.name }}</option>
            </select>
            </template>
            <select v-model="priority" id="priority" required>
            <option value="" disabled selected hidden>Priority Level</option>
            <option value="High">High</option>
            <option value="Medium">Medium</option>
            <option value="Low">Low</option>
            </select>
            <select v-model="taskStatus" id="taskStatus" @change="handleTaskStatusChange" required>
            <option value="" disabled selected hidden>Task Status</option>
            <option value="Pending">Pending</option>
            <option value="Working On">Working On</option>
            <option value="Completed">Completed</option>
            </select>
            <input v-model="taskStartTime" type="datetime-local" id="taskStartTime" placeholder="Select Start Time" required/>
            <input v-model="taskDueTime" type="datetime-local" id="taskDueTime" placeholder="Select Due Time" required/>
            <input v-model="taskCompletedTime" :disabled="taskStatus !== 'Completed'" type="datetime-local" placeholder="Select Completed Time" id="taskCompletedTime"/>
            <textarea v-model="taskDescription" id="taskDescription" placeholder="Task Description"></textarea>
        </div>
        <button @click="createTask">Create</button>
        <button @click="showDialog = false">Cancel</button>
    </div>
</template>

<script>
import axios from 'axios';
import { format } from 'date-fns';
export default {
    name: 'taskcreate',
    data() {
        return {
            showDialog: false,
            taskName: '',
            projectName: '',
            priority: '',
            assignedTo: '',
            taskStatus: '',
            taskStartTime: '',
            taskDueTime: '',
            taskCompletedTime: '',
            taskDescription: '',
            projects: [],
            users: [],
        };
    },
    mounted() {
      this.fetchUsers();
      this.fetchProjects();
      this.handleTaskChange();
    },
    methods: {
        async fetchUsers() {
            try {
                const response = await axios.get('/api/users');
                this.users = response.data;
            }
            catch (error) {
                console.error('Error fetching Users:', error);
                alert('Error fetching Users');
            }
        },
        async fetchProjects() {
            try {
                const response = await axios.get('/api/projects');
                this.projects = response.data;
            }
            catch (error) {
                console.error('Error fetching projects:', error);
                alert('Error fetching Projects');
            }
        },
        async createTask() {
            try {
                const response = await axios.post('/api/tasks/create', {
                    taskName: this.taskName,
                    projectName: this.projectName,
                    priority: this.priority,
                    assignedTo: this.assignedTo,
                    taskStatus: this.taskStatus,
                    taskStartTime: this.taskStartTime,
                    taskDueTime: this.taskDueTime,
                    taskCompletedTime: this.taskCompletedTime,
                    taskDescription: this.taskDescription,
                });
                console.log('Creating task');
                console.log(response.data);
                this.showDialog = false;
            }
            catch (error) {
                console.error('Error creating task:', error.response.data);
            }
        },
        async handleTaskChange() {
            if (this.taskStatus === 'Completed') {
                this.taskCompletedTime = format(new Date(), "yyyy-MM-dd'T'HH:mm:ss");
            }
        },
        async handleCreateClick() {
            console.log('Create button clicked');
            this.showDialog = true;
        }
    }
};
</script>

app.js code –

import './bootstrap';
import { createApp } from 'vue';
import taskcreate from '../views/components/vue-components/task-create.vue';
const app = createApp({
    components: {
        'taskcreate': taskcreate,
    },
});
app.mount('#app');

// import Alpine from 'alpinejs';
// window.Alpine = Alpine;
// Alpine.start();

app.blade.php, include portion –

            <div id="app">
                <main>
                    {{ $slot }}
                </main>
            </div>

dashboard.blade.php, button code –

                        <div class="px-6 pt-4 pb-2">
                            <button @click="handleCreateClick" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">Create</button>
                            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"><a href="#">show</a></span>
                            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"><a href="#">createv</a></span>
                        </div>
            <taskcreate></taskcreate>

Trying to make modal open and work the functionality. Hope i get help.