Как перенести код в отдельный компонент vue?

Question

[MortSith]

Как перенести кнопку в отдельный компонент чтобы она работала

<script setup>
import { ref, } from 'vue'

const red = ref(true)

</script>


 <template>
 <h1>Lorem jwfeh we h woeiur </h1>
<h2>
     {{red}}
   </h2>
  <button 
  @click="red = !red"
  >Кнопка</button>

</template>

Comments

[Вадим]

Создаёте компонент,
выносите туда кнопку,
по клику делаете emit('click'),
импортируете созданный компонент в текущий и вставляете вместо кнопки с тем же обработчиком.

С чем возникает сложность?

[MortSith]

Вадим, все разобрался, просто хотел изменить переменную в родительском из дочернего, а функцию обработки оставил в дочернем, и начал все усложнять через props