Uncaught TypeError: _ctx.showEditModal is not a function in Vue 3 + Laravel Poject

working with Laravel + Vue Js 3 project. in My Tags.vue file I have edit button as well tags.vue tags.vue

<template>
    <div>
       <div class="content">
			<div class="container-fluid">
				
				<!--~~~~~~~ TABLE ONE ~~~~~~~~~-->
				<div class="_1adminOverveiw_table_recent _box_shadow _border_radious _mar_b30 _p20">
					<p class="_title0">Tags <Button @click="addModal=true"><Icon type="md-add" /> Add tag</Button></p>

					<div class="_overflow _table_div">
						<table class="_table">
								<!-- TABLE TITLE -->
							<tr>
								<th>ID</th>
								<th>Tag name</th>
								<th>Created at</th>
								<th>Action</th>
							</tr>
								<!-- TABLE TITLE -->


								<!-- ITEMS -->
                                <tr v-for="(tag, i) in tags" :key="i" v-if="tags.length">
                                    <td>{{tag.id}}</td>
                                    <td class="_table_name">{{tag.tagName}}</td>
                                    <td>{{tag.created_at}}</td>
                                    <td>
                                        <Button type="info" size="small" @click="showEditModal(tag)">Edit</Button>
                                        <Button type="error" size="small">Delete</Button>
                                        <!-- <button class="_btn _action_btn edit_btn1">Edit</button>
                                        <button class="_btn _action_btn make_btn1">Delete</button> -->
                                    </td>
                                </tr>
                        </table>
                    </div>			

			</div>
            <Page :total="100" />
            <!--Tag Adding Model-->
            <Modal
             v-model="addModal"
             title="Add tag"
             :mask-closable="false"
             :closable="false"
                >
             <Input v-model="data.tagName" placeholder="Add tag name"/>

               <div slot="footer">
                
                 <Button type="default" @click="addModal=false">Close</Button>
                 <Button type="primary" @click="addTag" :disabled="isAdding" :loading="isAdding">{{isAdding ? 'Adding..' : 'Add tag'}}</Button>
               </div>
              </Modal>
              <!-- tag editing modal -->
				<Modal
					v-model="editModal"
					title="Edit tag"
					:mask-closable="false"
					:closable="false"

					>
					<Input v-model="editData.tagName" placeholder="Edit tag name"  />

					<div slot="footer">
						<Button type="default" @click="editModal=false">Close</Button>
						<Button type="primary" @click="editTag" :disabled="isAdding" :loading="isAdding">{{isAdding ? 'Editing..' : 'Edit tag'}}</Button>
					</div>

				</Modal>
              <!--tag editing model-->
            </div>
		</div>
    </div>
</template>

<script>
export default {
    data(){
        return {
           data : {
               tagName: ''
           },
           addModal : false,
           editModal : false,
           isAdding : false,
           tags : [],
           editData : {
            tagName: ''
           }
        }
    },

    methods : {
        async addTag(){
            if(this.data.tagName.trim()=='') return this.e('Tag name is required')
            const res = await this.callApi('post', 'app/create_tag', this.data)
            if(res.status===201){
                this.tags.unshift(res.data)
                this.s('Tag has been added sucessfully!')
                this.addModal = false
                this.data.tagName = ''
            }else{
                if(res.status==422){
                    if(res.data.errors.tagName){
                       this.e(res.data.errors.tagName[0])
                    }
                     console.log(res.data.errors.tagName)
                }else{
                    this.swr()
                }
                
            }

        }
    },

    async editTag(){
			if(this.editData.tagName.trim()=='') return this.e('Tag name is required')
			const res = await this.callApi('post', 'app/edit_tag', this.editData)
			if(res.status===200){
				this.tags[this.index].tagName = this.editData.tagName
				this.s('Tag has been edited successfully!')
				this.editModal = false
				
			}else{
				if(res.status==422){
					if(res.data.errors.tagName){
						this.e(res.data.errors.tagName[0])
					}
					
				}else{
					this.swr()
				}
				
			}

		},
		showEditModal(tag){
			
			this.editData = obj
			this.editModal = true
			
		}, 

    async created(){
        const res = await this.callApi('get', 'app/get_tags')
        if(res.status==200){
            this.tags = res.data
        }else{
            this.swr()
        }
    }
   
}
</script>

but when I clicked edit button it is not appearance tag edit page and console encounted following error message Uncaught TypeError: _ctx.showEditModal is not a function onClick http://localhost:8000/js/app.js:20386

my app.js

import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import common from './common'

createApp({
    components: {
        mainapp,
    }
    
}).use(router).use(ViewUIPlus).mixin(common).mount('#app');

how could I fix this problem?