index.vue

<template>
  <div>
    <Sub message="hello" />
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
  onUpdated,
  onMounted,
  onUnmounted,
} from '@vue/composition-api';
import Sub from './sub.vue';

export default {
  components: {
    Sub,
  },
  setup(props) {
    onMounted(() => console.log('mounted'));
    onUpdated(() => console.log('updatede'));
    return {};
  },
};
</script>

sub.vue

<template>
  <div>
    <h2>Sub: {{ message }}</h2>
    <div>{{ count }}</div>
    <button @click="increment">++</button>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  PropType,
  ref,
  onUpdated,
  onMounted,
  onUnmounted,
} from '@vue/composition-api';

type Props = { message: string };

const useCounter = () => {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };
  return { count, increment };
};

export default defineComponent<Props>({
  name: 'Sub',
  props: {
    message: {
      type: String as PropType<string>,
      required: true,
    },
  },
  setup(props) {
    const { count, increment } = useCounter();
    return {
      count,
      message: props.message as any,
      increment,
    };
  },
});
</script>