特定の$refsが初回呼び出し時に取得できない

Question

前提・実現したいこと

ダイアログ内にフォームを作るコンポーネントで、初回表示時（SSR設定でも<no-ssr>をつけた場合でも）
inputsを$refs経由で取得することができません(オブジェクトに含まれない)。

2回目以降のダイアログ表示では取得できるようになります。（ダイアログを閉じたタイミングでrefsとして取得できるようになる）

子コンポーネントのバリデーション処理を実行して、戻りを取得したいので$emitは使用できません。
emitの引数を参照渡しで親側で取得できれば問題ないかとも思いますが、なにか解決策はありますでしょうか

該当のソースコード

親コンポーネント

    <base-dialog-with-close-button
        ref="dialog"
        max-width="900px"
        :title="title"
    >
        <auto-create-inputs
            :validate="validate"
            @validate="v => this.valid = v"
            v-model="data"
            :inputs="inputs"
            ref="inputs" // ← こいつ
        />
        <template v-slot:action>
            <v-row dense justify="center">
                <save-button
                    :form_data="data"
                    url="/api/company"
                    :valid="valid"
                    @validate="$refs.inputs.validate()"
                    @saved="v => saved(v)"
                >保存</save-button>
                <button-grey class="ml-2" @click="hide()">キャンセル</button-grey>
            </v-row>
        </template>
    </base-dialog-with-close-button>

子コンポーネント

<template>
    <v-form ref="form" v-model="valid" lazy-validation>
        <v-flex>
            <v-row dense >
                <v-col
                    v-for="(input,key) in inputs"
                    :cols="input.col?input.col:'12'"
                    :key="key"
                    class="form_col"
                >
                    <v-row dense justify="start">
                        <v-col>
                            <v-subheader class="form_label">
                                <span class="label">
                                    {{ input.label }}
                                </span>
                                <span v-if="input.required" class="required_label" style="text-align: end">
                                    ※必須
                                </span>
                            </v-subheader>
                        </v-col>
                        <v-col class="input_col">
                            <component
                                :value="getValue(input.value,data)"
                                @input="setValue"
                                :is="getInputComponent(input)"
                                :items="input.items"
                                :prepend-inner-icon="input.prepend_inner_icon"
                                :rules="getRules(input)"
                                :disabled="input.disabled"
                                :clearable="input.clearable"
                                :hint="input.hint"
                                :persistent-hint="input.persistent_hint"
                                :url="input.url"
                                :type="input.val_type"
                                @address="v => setAddr(v,input.addr_col)"
                            />
                            <p class="outer_suffix" v-if="input.outer_suffix">
                                {{ input.outer_suffix }}
                            </p>
                        </v-col>
                    </v-row>
                </v-col>
            </v-row>
        </v-flex>
    </v-form>
</template>

Answer 1

base-dialog-with-close-button がどんなコンポートネントかは知る由もないですが、エスパーして vuetify の v-dialog とすると その default スロットは ダイアログ表示するまでは DOMを生成しないので無理では？（閉じてもDOMは削除されず、再度開くときに再利用されるのでそれが取得できているであろうと思われます。

ただ、必要になった時のアクセスとして $parent 使ってアクセスする分にはアクセスできると思います。

https://v2.ja.vuejs.org/v2/guide/components-edge-cases#%E8%A6%AA%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%81%B8%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9