【Vue.js】子コンポーネントのmounted後に処理を実行したい

Question

Vue.js及びJavaScript初心者です。実現したいことはなんとか形にはなったのですが、全く良い書き方とは思えず、潜在的な問題もあるかもしれません…。より効率的であったり、スマートな書き方があればご教示いただければ幸いです。

前提・実現したいこと

使用言語：Vue.js(2系), vue-router(v3.5.1)

2つのviewをタブで切り替えるWEBサイトを作っています。
どちらのviewも、Intersection Observer APIを用いて無限スクロールを実装しています。
さらに、無限スクロールで表示させるコンテンツは、各view共通の子コンポーネントを読み込んでいます。

このcreateObserver()という処理を、子コンポーネントである各コンテンツがmounted（createdでも可能？）された後に実行したいと思います。現状は、紆余曲折を経て、単純に500ms後に関数を呼び出すことで実現したい挙動はなんとかできています。。

// 親コンポーネント(view)
<template>
  <div>
    〜〜中略〜〜
    <Post
      v-for="post in posts"
      :key="post.name"
    ></Post>
  </div>
</template>

<script>
import Post from "../components/Post";
import { createObserver } from '../js/intersectionObserver';

export default {
  〜〜中略〜〜

  mounted() {
    setTimeout(() => {
      createObserver();
    }, 500);
  },

  〜〜中略〜〜
}
</script>

発生している問題・解決したいこと

この「500ms後に処理をする」という書き方よりも良い方法について、お知恵を貸していただきたいです。
この場合ですと、例えば通信環境が悪く読み込みに時間がかかっている場合などは期待する挙動にならないのではと思っています。

試したこと

• 初めsetTimeoutのmsを100msにしたところ、40%くらいの確率で望む挙動になり運頼みという不安定な状態でした。。現状なんの根拠もなく500msに設定しているので、それも良いのかわかりません。
• 非同期処理だ、と聞きかじった知識で思い浮かびはしたものの、子コンポーネントがmountedになったらという状態をどう取得し活用できるかも見当がつかず、試せていません。

わかりづらい点があれば恐縮ですが、何卒ご教授のほど宜しくお願いいたします！

解決方法

1. $emitを使った方法

// 子
mounted() {
    this.$emit('is-post-mounted');
  },

//  親
<Post @is-post-mounted="childDOMMounted"></Post>
~~
methods: {
	childDOMMounted() {
		createObserver();
	}
}

1. $nextTickを使った方法

// 子
mounted() {
  this.$nextTick(() => {
    createObserver();
  })
}

Answer 1

親のmountedにnextTick入れるだけで対応できるかもしれません。
Lotus Base

親子でemitを使えばほぼ確実に実現できます。
vue.jsで子から親コンポーネントにデータを渡す方法 | Code Pocket

propSyncやwatchでもいいかもしれません。
一応公式サイトには全て載っています。
API — Vue.js

Comments

[manape]

URL付きでご回答ありがとうございます！！
emitで試してみたところ、実現できました！

他の方法でも試してみて結果もご共有したいので、他のリンクも拝見させていただきます????‍♀️

[manape]

子のmountedにnextTick入れることでもできました！

$emitですと親子どちらにも処理を記述しなければいけなかったですが、nextTickの場合子の方に書くだけで良くなりコードも簡潔になりました。
ありがとうございます！