Vue3 CompositionAPIで親コンポーネントから子コンポーネントの関数を呼び出したい場合、子コンポーネントに ref を設定し、関数を呼び出す。

ChildComponent.vue

<template>
  <div>
    <button @click="onButtonClick">Child Button</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ChildComponent',
  setup() {
    function onButtonClick() {
      console.log('Child button clicked');
    }

    return { onButtonClick };
  },
});
</script>

ParentComponent.vue

<template>
  <div>
    <ChildComponent ref="childComponent" />
    <button @click="clickChildButton">Click Child Button</button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  name: 'ParentComponent',
  components: {
    ChildComponent,
  },
  setup() {
    const childComponent = ref(null);

    function clickChildButton() {
      // 子コンポーネントのメソッドを呼び出す
      childComponent.value.onButtonClick();
    }

    return {
      childComponent,
      clickChildButton,
    };
  },
});
</script>

本題はここから。
CompositionAPIを使う場合、より簡潔に書くために setup シンタックスシュガーを使いたいところ。しかしこの場合、各プロパティがデフォルトで公開されないため、 defineExpose 関数を使って公開してあげる必要がある。
親も子も setup を使った場合の例はこちら。

ChildComponent.vue

<template>
  <div>
    <button @click="onButtonClick">Child Button</button>
  </div>
</template>

<script setup lang="ts">
const onButtonClick = () => {
  console.log('Child button clicked');
}
defineExpose({ onButtonClick })
</script>

ParentComponent.vue

<template>
  <div>
    <ChildComponent ref="childComponent" />
    <button @click="clickChildButton">Click Child Button</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const childComponent = ref(null);

const clickChildButton = () => {
  // 子コンポーネントのメソッドを呼び出す
  childComponent.value.onButtonClick();
}
</script>

ただし今更ではあるが、親から子の関数を直接呼び出す方法はVueのベストプラクティスに反するため、避けられる場合は避けるべき。データフローとイベントを適切に使って親子間のコミュニケーションを行うことが推奨される。