// PARENT -> CHILD

// PARENT
<!-- App.vue-->
<template>

    <HelloWorld v-slot="{ setRef }">
      <input type="text" :ref="(el) => setRef(el)" />
    </HelloWorld>
 
</template>

<script setup>
import HelloWorld from './HelloWorld.vue';
</script>


// CHILD
<template>
  <slot v-bind="{ setRef }"></slot>
  <button @click="setFocus">SET</button>
</template>

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

const myInputFromSlot = ref(null); // what ever name

const setFocus = () => {
  myInputFromSlot.value.focus();
};

const setRef = (el) => {
  myInputFromSlot.value = el
  console.log(el);
};

</script>



// CHILD -> PARENT

// PARENT
<!-- App.vue-->
<template>

    <HelloWorld :ref-to-child="setRefToChild">
      <input type="text" ref="inputak" />
    </HelloWorld>
 
</template>

<script setup>
import { ref } from "vue" 
import HelloWorld from './HelloWorld.vue';

const inputak = ref()
const setRefToChild = () => inputak
</script>


// CHILD
<template>
  <slot></slot>
</template>

<script setup>
import { onMounted } from 'vue'
const props = defineProps(['refToChild'])

onMounted(() => {
  console.log(props.refToChild().value.focus())
})

</script>