Vue2のCDN版でhttp-vue-loaderを使うとネストしたコンポーネントで初期フォーカスを設定できない

Question

問題点

掲題のとおりです。
解消方法がわかりましたらご教示ください。

エラーメッセージ

[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'focus')"

該当のソースコード

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.11/dist/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<div id="app">
	<test2 />
</div>
<script>
const app = new Vue({
	el: "#app",
	components: {
		test2: httpVueLoader('./test2.vue')
	},
})
</script>

<template>
	<div><slot /></div>
</template>

<template>
	<test1><input type="text" ref="name" /></test1>
</template>
<script>
module.exports = {
	mounted() {
		this.$refs.name.focus()
	},
	components: {
		test1: httpVueLoader('./test1.vue')
	},
}
</script>

試したこと

次のソースコードでは正常にフォーカスを設定できることを確認しました。

例1（http-vue-loaderを使わないネストしたコンポーネント）

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.11/dist/vue.js"></script>
<div id="app">
	<test2 />
</div>
<script>
Vue.component('test1', {
	template: '<div><slot /></div>',
})
Vue.component('test2', {
	template: '<test1><input type="text" ref="name" /></test1>',
	mounted() {
		this.$refs.name.focus()
	},
})
const app = new Vue({
	el: "#app",
})
</script>

例2（http-vue-loaderを使うネストしないコンポーネント）

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.11/dist/vue.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<div id="app">
	<test />
</div>
<script>
const app = new Vue({
	el: "#app",
	components: {
		test: httpVueLoader('./test.vue')
	},
})
</script>

<template>
	<input type="text" ref="name" />
</template>
<script>
module.exports = {
	mounted() {
		this.$refs.name.focus()
	},
}
</script>

補足情報（FW/ツールのバージョンなど）

Windows10 Pro
Docker 20.10.20
Apache 2.4.54
Chrome 108.0.5359.126

Comments

[gosaro]

暫定的な回避方法が見つかったのでコメントしておきます。

親コンポーネントの mounted() 実行時に子コンポーネントがマウント済みであるとは保証されていないのが原因のようです。
問題のプログラムでは $refs で子コンポーネントを参照しているわけではありませんが、子コンポーネントがマウントされるまでは $refs も設定されないのではないかと思われます。

◇index.html の <script> に追加
let globalResolve = null

◇test2.vue の mounted() を変更
mounted() {
new Promise((resolve) => {
globalResolve = resolve
}).then(() => {
globalResolve = null
this.$refs.name.focus()
})
},

◇test1.vue に<script> を追加
<script>
module.exports = {
mounted() {
if (globalResolve) globalResolve()
},
}
</script>

なお、公式マニュアルでは $nextTick() を使うことができると書かれていましたが、次のコードでは解消せず、同じエラーになりました。

this.$nextTick(function () { this.$refs.name.focus() })

一応解消はしましたが、グローバル変数を使うのが気に入らないのと、単にフォーカスを設定するために書くコードとしては複雑すぎるのとで、あくまでも暫定的な回避方法と考えています。
よりよい解決方法がありましたらご回答ください。

[gosaro]

逆に子コンポーネントより先に親コンポーネントがマウントされると保証されているわけでもないと思うので、上の回避方法ではダメですね…
偶然うまく動作しただけで潜在的な不具合の原因になりそうです。

Answer 1

自己解決です。
安直ですがポーリングすることにしました。

	async mounted() {
		while (!this.$refs?.name) await new Promise((r) => setTimeout(() => r(), 10))
		this.$refs.name.focus()
	},