access method outside vue component

i am new in vuejs. i have created comment feature similar with here, but due to certain circumstances i have to improvise it. i use vue component but it couldn’t access method inside my vue. if user has already post comment, any user may be able to reply that particular comment. however, i received vue warn “Property or method ‘replyComment’ is not defined on the instance but referenced during render”. can anyone help me please?

Vue.component('reply-komen',{
        template:'#replykomen',
        props:{
            edit:{
                type:Boolean,
                default:false
            },
            comment:{
                type:Object,
                default(){
                    return {
                        title: '',
                        body: '',
                        id: ''
                    }
                }
            }
        },
        methods:{
            replyComment: function(comment_id){
                console.log(comment.id);
                var id={{$complaint->id}};
                var users={{IlluminateSupportFacadesAuth::user()->id}};
                const item=this.$refs.balaskomen;
                const idkomen=item.dataset.id;
                console.log(idkomen);
                $.ajax({
                    url:'/api/complaint/comment',
                    type:"POST",
                    data:{
                        'users':users,
                        'id':id,
                        'comment':this.comment
                    },
                    success:function (response) {
                        komen2.comment.body= '';
                        komen2.fetchComments();
                    }
                })
            }
        }
    });

    var komen2=new Vue({
        el: '#kalas',
        data:{
            currentView:'',
            edit:false,
            comments:[],
            comment: {
                title:'',
                body: '',
                id: '',
            }
        },

        created: function(){
            this.fetchComments();
            this.createComment();
            this.editComment();
            this.deleteComment();
            this.showComment();
        },

        methods: {
            fetchComments: function(){
                var id={{$complaint->id}};
                $.ajax({
                    url:'/api/complaint/getcomments',
                    type:"GET",
                    data:{
                      'id':id
                    },
                    success:function (response) {
                        komen2.comments = response;
                    }
                })
            },

            createComment: function(){
                var id={{$complaint->id}};
                var users={{IlluminateSupportFacadesAuth::user()->id}};
                $.ajax({
                    url:'/api/complaint/comment',
                    type:"POST",
                    data:{
                        'users':users,
                        'id':id,
                      'comment':this.comment
                    },
                    success:function (response) {
                        komen2.comment.body= '';
                        komen2.fetchComments();
                    }
                })
            },

            editComment: function(comment_id){
                $.ajax({
                    url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
                    type:"PATCH",
                    data:{
                        'comment':this.comment
                    },
                    success:function (response) {
                        komen2.comment.body= '';
                        komen2.comment.id= '';
                        komen2.fetchComments();
                        komen2.edit = false;
                    }
                })
            },

            deleteComment: function(comment_id){
                $.ajax({
                    url:'/api/complaint/'+window.Laravel.post_id+'/comment'+comment_id,
                    type:"DELETE",
                    success:function (response) {
                        komen2.comment.body= '';
                        komen2.fetchComments();
                    }
                })
            },

            showComment: function(comment_id){
                for (var i = 0; i < this.comments.length; i++) {
                    if (this.comments[i].id == comment_id) {
                        this.comment.body = this.comments[i].body;
                        this.comment.id = this.comments[i].id;
                        this.edit = true;
                    }
                }
            }
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="kalas">
    <div class="container">
        <h4>Add Comment</h4>
        <form action="" @submit.prevent="edit ? editComment(comment.id) : createComment()">
            <div class="input-group">
                <textarea name="body" v-model="comment.body" ref="textarea"  class="form-control"></textarea>
            </div>
            <div class="input-group">
                <button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
                <button type="submit" class="btn btn-primary" v-show="edit">Edit Comment</button>
            </div>
        </form>
        <br>
        <h4>Comments</h4>
        <ul class="list-group" v-for="comment in comments">
            {{--<li class="list-group-item" v-for="comment in comments">--}}
                <form>
                    <div class="input-group">
                        <textarea class="form-control">@{{comment.body}}</textarea>
                    </div>
                    <div class="input-group" ref="balaskomen" v-bind:id="comment.id">
                        <a class="btn btn-default" v-on:click="currentView='reply-komen'">Reply</a>
                        <a class="btn btn-danger" v-on:click=" deleteComment(comment.id)">Delete</a>
                    </div>
                </form>
            {{--</li>--}}
        </ul>
        <div class="container balas" >
            <component :is="currentView"></component>
        </div>
    </div>
</div>
<template id="replykomen" >
    <form action="" @submit.prevent="replyComment(comment.id)">
        <div class="input-group">
            <textarea name="body" v-model="comment.body" ref="textarea"  class="form-control"></textarea>
        </div>
        <div class="input-group">
            <button type="submit" class="btn btn-primary" v-show="!edit">Add Comment</button>
        </div>
    </form>
</template>

Answer

replyComment is defined in the second Vue instance (#kalas), but referenced in the first instance’s template (#replykomen). Move/copy the method to the first Vue instance’s methods to resolve the error.