[Vuejs]-How to pass a components? [ laravel, vue ]

How about using Vue mixins feature?
At App.vue

<script>
import ModalComponents from '@/ModalComponents'
export default {
  mixins: [ModelComponents],
  mounted(){
    this.fetchUser()
  }
}
</script>

App.Vue

<template>
  <div>
    <ModalComponents :emps="emp">
  </div>
</template>


<script>
  export default {
    data() {
      return {
        emp: null,
      }
    }
    methods: {
      fetchUser() {
          fetch('api/employee').then(res => res.json())
          .then(res => {
              this.emp = res.data;
          })
      }
    }
  }
</script>

ModalComponents

<template>
  <div>
    {{emps.name}}
  </div>
</template>

<script>
export default {
  props: [
    'emps'
  ],
}
</script>

Otherway

App.vue

<template>
  <div>
    <ModalComponents v-on:fetch-user="getUser">
  </div>
</template>


<script>
  export default {
    data() {
      return {
        emp: null,
      }
    },

    methods: {
      getUser(newEmp) {
        this.emp = newEmp
      }
    }

  }
</script>

ModalComponents

<template>
  <div>
    <form @submit.prevent="fetchUser">
      ...
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    fetchUser() {
        fetch('api/employee').then(res => res.json())
        .then(res => {
            this.emp = res.data;
        })

        const newEmp = this.emp

        this.$emit('fetch-user', newEmp)
    }
  }
}
</script>