<!-- 1) From Child to Parent via scoped slot and dynamic ref-->

<!-- App.vue-->
<template>
  <div id="app">
    <HelloWorld v-slot="{ setRef }">
      <input type="text" :ref="(el) => setRef(el)" />
    </HelloWorld>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
};
</script>


<!-- Hello world -->
<template>
    <slot v-bind="{ setRef }"></slot>
    <button @click="setFocus">SET</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      ref: ''
    }
  },
  methods: {
    setFocus()
    {
      this.ref.focus()
    },
    setRef(el) {
     this.ref = el
     console.log(el)
    }
  }
}
</script>