如何在vue.js中创建用于创建和编辑功能的简单模式？

Question

我正在尝试创建一个模型以能够编辑现有数据？我将如何去做？

在这种情况下，我正在创建问题，我要使用<el-form>创建一个新条目，我想将其重复用于编辑，并将条目中的数据添加到表单中。

[现在是我的表格

<el-dialog title="Nuevo" :loading="loading" :visible="dialogFormVisible" :visible.sync="dialogFormVisible">

    <el-form label-position="top" ref="form" :model="form" :rules="rules">
        <el-row>
            <el-form-item label="Pregunta" prop="question">
                <el-input v-model="form.question"></el-input>
            </el-form-item>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item label="Seccion" prop="survey_section_id">
                    <el-select v-model="form.survey_section_id" placeholder="Selecionar">
                        <el-option v-for="section in survey_section" :key="section.id" :label="section.title"
                            :value="section.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="Tipo de Respuesta" prop="response_type">
                    <el-select v-model="form.response_type_id" placeholder="Selecionar">
                        <el-option v-for="type in response_type" :key="type.id" :label="type.type" :value="type.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="Opcional" prop="optional">
                    <el-switch v-model="form.optional"></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <span slot="footer">
        <el-button type="info" @click="dialogFormVisible = false">Cancelar
        </el-button>
        <el-button type="primary" :loading="loading" @click="submit('form')">Guardar
        </el-button>
    </span>
</el-dialog>

我需要怎么做才能将其转换为模式并将其用于编辑？

问我任何事情，我都可以提供所需的任何代码。谢谢