How to pass data between parent and child components in vue?

Use props for passing data from parent to child:

<!-- Parent Component -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent!'
    };
  }
};
</script>

<!-- Child Component -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
};
</script>