[Vuejs]-How to call components with function/method in pages?

<div id="parent">
  <child :delegate="delegateMethod" ref="child" />
</div>

<script>
import { ref } from "vue";
export default({
  setup() {
    const child = ref()

    const callChildMethod = () => {
      child.method();
    };

    const delegateMethod = () => {
      console.log("call from child");
    };
    
    return { delegateMethod };
  }
});
</script>

<div id="child">
  <p>child component</p>
  <button @click="responseToParent()">
</div>

<script>
export default({
  props: {
    delegate: {
      type: Function,
      default: () => {}
    }
  },
  setup(props) {
    const method = () => {
      console.log("call from parent");
    };
    const responseToParent = () => {
      props.delegate();
    };

    return { responseToParent };
  }
});
</script>

This is a very simple example. It works like this between parent and child components in Vue.