Как сделать чтобы по клику закрылась кнопка?

Question

Alex @Lawrence_33

Vue.js

Как сделать чтобы по клику закрылась кнопка?

Добрый день, подскажите пожалуйста у меня в одном компоненте кнопка по клику у её внутри открывается input(text), в input (text) есть кнопка с крестиком закрыть, как сделать чтобы при клике на крестик (@click="resetInput") кнопка закрывалась ( this.setupField = false) ? То есть чтобы функция из одного компонента сработала в другом компоненте ? Буду очень благодарено.

<template>
    	<button 
			class="inline-flex justify-center items-cente h-12 max-w-24 w-auto px-7.25 py-3.75 rounded-xs dark:bg-transparent border-1 border-white
					 bg-transparent text-xs font-medium not-italic text-white
						 group hover:bg-black-700 hover:border-purple ease-in transition" @click="setupChange()">
			<div class="text-xs whitespace-nowrap text-white group-hover:text-purple">
				<div class="" v-if="!setupField" :class="{'hidden' : setupField}">
                         <slot></slot>
                </div>
        	<div class="items-center" v-if="setupField" :style ="{display: setupField ? 'flex' : 'hidden'}">
            <InputSetup/>
        </div>
			</div>
		</button>
</template>
<script>
import InputSetup from '@/components/inputs/InputSetup.vue'
export default {
    name: 'SetupBtn',
    components: {
		InputSetup,
    },
    methods: {
		setupChange(){
            this.setupField = true
        },
    },
    data(){
        return{
			inputSetup: "",
        	setupField: false,
        };
    },
  }
</script>

<template>
    <form action="" class="flex items-center">
        <ResetInputBtn class="hidden" @click="resetInput" :class="removeClassIcon(inputSetup)"/>
        <span class="mr-2.5" :class="getClassIcon(inputSetup)"><DollarSetupIcon class=""/></span>
        <input type="number" v-model="inputSetup" class="bg-transparent max-w-7.5">
    </form>
</template>
<script>
   import DollarSetupIcon from '@/components/icons/DollarIcon.vue'
   import ResetInputBtn from '@/components/buttons/ResetInputBtn.vue'
    export default {
    name: 'InputSetup',
    data() {
    return {
        inputSetup: 0,
        setupField: false,
    };
  },
    methods: {
        resetInput(e){
            e.preventDefault();
            alert('work');
            this.setupField = false;
        },
        getClassIcon(str) {
            return {
                'hidden' : !!str && str.toString().length > 0,
     }
    }, 
        removeClassIcon(e){
            return {
                '!flex' : !!e && e.toString().length > 0,
                'mr-2.5' : !!e && e.toString().length > 0,
            }
        }
    },
    components: {
        DollarSetupIcon,
        ResetInputBtn
    },
}
</script>