مشکل در نمایش ادیتور

سلام
برای نمایش ادیتور حتما نیاز به دو بار کلیک کردن دکمه ادیت هست. هر راهی رفتم جواب نداد. با کلیک دکمه ویرایش متد editme اجرا میشه. و editing را true میکنه و دیتا در کادر مربوطه نمایش داده میشه ولی ادیتور لود نمیشه.حالا یک بار دیگخه اگر روی دکمه ویرایش بزنم دیتا در ادیتور نمایش داده میشه.

<template>

    <div :id="'reply-'+id" class="card text-left">
        <div class="card-header bg-color-dark text-light text-uppercase" style="padding:0rem 1.25rem ;">
            <div class="row">
                <div class="col-11">
                    <a :href="url+'/profiles/'+data.owner.username" v-text="data.owner.Firstname+' '+data.owner.Lastname">

                    </a>-<span v-text="ago"></span>
                </div>
                <div class="col-1">
                    <div class="row" v-if="signedIn">
                        <favorite :reply="data" :url="url+'/replies'" ></favorite>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div v-if="editing">
                    <div class="form-group">
                        <span :class='classes.errortext'  v-if="form.errors().has('body')" v-text="form.errors().get('body')"></span>
                        <textarea
                                :class="form.errors().has('body')?classes.errorborder:classes.form"
                                name="body"   id="bodyforum" class="form-control" row="5" v-html="form.body"   v-model="form.body"> </textarea>
                        <a class="btn btn-primary btn-sm" @click="update">ذخیره</a>
                        <a class="btn btn-primary btn-sm" @click="editing=false">انصراف</a>
                    </div>
                </div>
                <div v-else v-html="body">

                </div>
            </div>
            <div class="card-footer bg-color-grey" v-if="canUpdate" style="padding:0rem 1.25rem ;">
                <div class="row">
                    <button  class="mb-1 mt-1 mr-1 btn btn-outline btn-sm btn-primary" @click="editme"><i class="fas fa-edit"></i>  </button>
                    <button  class="mb-1 mt-1 mr-1 btn btn-outline btn-sm btn-danger" @click="destroy"><i class="fas fa-times"></i>  </button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

    import formeditreply from '../../../node_modules/vuejs-form'

    import Favorite from './favorite.vue';
    import moment from 'moment';
    export default {
        props:['data','url'],
        components:{formeditreply,Favorite},
        data(){
            return{
                id:this.data.id,
                editing:false,
                body:this.data.body,
                form: formeditreply({
                    body:this.data.body,
                })
                    .rules({
                        body: 'required',
                    })
                    .messages({
                        'body.required': 'محتوای خود را در کادر مربوطه درج نمائید',
                    }),
            }
        },
        computed:{

            ago(){
                return moment(this.data.created_at).locale('fa').fromNow()+'...';
            },
            signedIn(){
                return window.App.signedIn;
            },
            canUpdate(){
                return this.authorize(user=>this.data.user_id==user.id);
            },
            classes: $this => ({
                errortext: 'errortext',
                errorborder:'errorborder',
                form:'form-control'
            }),
        },
        watch: {
            ['form.data']: {
                deep: true,
                immediate: false,
                handler: 'onFormChange'
            },
            editing:function(val){
                if(val==true)
                {
                    $('#bodyforum').summernote({
                        lang: 'fa-IR',
                        toolbar: [
                            ['style', ['style']],
                            ['font', ['bold', 'underline', 'clear']],
                            ['color', ['color']],
                            ['para', ['ul', 'ol', 'paragraph']],
                            ['table', ['table']],
                            ['insert', ['link', 'picture']],
                            ['view', ['fullscreen', 'codeview']],
                        ],
                    });
                    $('.dropdown-toggle').dropdown();
                }
            }

        },

        methods: {

            onFormChange(after, before) {
                this.form.validate()
            },

            editme() {
                this.editing = true;
                this.showeditor();
            },

            showeditor(){
                $('#bodyforum').summernote({
                    lang: 'fa-IR',
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'underline', 'clear']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['table', ['table']],
                        ['insert', ['link', 'picture']],
                        ['view', ['fullscreen', 'codeview']],
                    ],
                });
                $('.dropdown-toggle').dropdown();

            },
            update(){
                if (this.form.validate().errors().any()) {
                    this.form.validate();

                }
                else {
                    axios.patch(this.url + '/replies/' + this.data.id, {
                        body:  $('#bodyforum').summernote('code')
                    })
                        .then(response => {
                            this.editing = false;
                            flash('مطلب ویرایش شد.');
                            this.body=$('#bodyforum').summernote('code')
                        })
                        .catch(error => {
                            flash(error.response.data, 'danger');
                        });
                }
            },
            destroy(){
                axios.delete(this.url+'/replies/'+this.data.id);
                this.$emit('deleted',this.data.id);
            },

        }
    }
</script>
<style>
    .errorborder{
        border-color: red;
        border-style:solid;
        color:red;
    }
    .errortext{

        color:red;
    }
</style>