Vue 3 Composition API with Refs

<template>
  <div>
    <!-- Use the ref attribute to define a template ref named 'myComponent' -->
    <component ref="myComponent"></component>
    <button @click="focusOnComponent">Focus</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    // Use ref() from Vue Composition API to create a reference named 'myComponentRef'.
    const myComponentRef = ref(null);

    // This function will be called when the button is clicked.
    function focusOnComponent() {
      // The value of myComponentRef will be the actual DOM element after the component is mounted.
      // You can interact with it as you would with a regular DOM element.
      myComponentRef.value.focus();
    }

    // Wait until the component is mounted to ensure the ref is bound to the component.
    onMounted(() => {
      // After the component is mounted, the ref myComponentRef can be used to access the component.
      if (myComponentRef.value) {
        console.log('Component has been mounted');
      }
    });

    // Expose any variables or functions that should be accessible in the template.
    return {
      myComponentRef,
      focusOnComponent
    };
  }
};
</script>