trigger a function inside child from parent vue

<!-- ParentComponent.vue -->

<template>
  <div>
    <button @click="triggerChildFunction">Trigger Child Function</button>
    <ChildComponent ref="childRef"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    triggerChildFunction() {
      this.$refs.childRef.childFunction();
    },
  },
};
</script>

<!-- ChildComponent.vue -->

<template>
  <div>
    <!-- Child component content -->
  </div>
</template>

<script>
export default {
  methods: {
    childFunction() {
      // Your function logic here
      console.log("Child function triggered from Parent");
    },
  },
};
</script>