Estoy usando Nuxt js y Element UI. He importado los complementos de la interfaz de usuario de elementos dinámicamente en la carpeta de complementos.

 export default () => { Vue.component("ElForm", () => import("element-ui/lib/form")); Vue.component("ElFormItem", () => import("element-ui/lib/form-item")); Vue.component("ElInput", () => import("element-ui/lib/input")); ...... }

Ahora, cuando abro un cuadro de diálogo modal con un componente dentro de él. Devuelve error de referencia. Probablemente se deba a que el componente aún no está cargado. ¿Cómo manejo este escenario? Incluso nextTick no funciona.

 <template> <div> <el-form :model="form" :rules="rules" ref="ruleForm" v-loading="loading" @submit.prevent.native="submitOnReturn" > <el-form-item label="Title" prop="title"> <el-input v-model="form.title" ref="inputField" :autofocus="true" /> </el-form-item> <el-form-item label="Details" prop="body"> <el-input v-model="form.body" type="textarea" :rows="4" /> </el-form-item> <el-form-item class="form-buttons"> <el-button type="" @click="cancel">Cancel</el-button> <el-button type="primary" @click="updateProductFaq" v-if="editMode" >Update</el-button > <el-button type="primary" @click="addProductFaq" v-else>Save</el-button> </el-form-item> </el-form> </div> </template>

 mounted() { this.$nextTick(() => { // focus input on mount this.$refs.inputField.focus(); this.$refs.ruleForm.clearValidate(); }); },

this.$refs.inputField no está definido