portal/app/Classes/CodeGenerator/Stubs/VueJs/element_component.stub

<template>
    <div class="card mb-3 parentContainer">
        <div class="row pt-3 pb-3 pr-4 pl-4">
            <div class="col">
                <div class="row align-items-center">
$FIELD_BODY$
                    <div class="col text-right">
                        <button type="button" class="btn btn-outline-secondary icon-button mr-3 requestModal" data-type="editModal"><i class="iconsminds-pen-2"></i></button>
                        <button type="button" class="btn btn-outline-danger icon-button requestModal" data-type="deleteModal"><i class="simple-icon-trash"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <form-component section="$MODEL_NAME_CAMEL$Section" :data="$MODEL_NAME_CAMEL$">
            <template slot="form" slot-scope="{section, data}">
                <$MODEL_NAME_DASHED$-form-component :section="section" :data="data"></$MODEL_NAME_DASHED$-form-component>
            </template>
        </form-component>
        <delete-component section="$MODEL_NAME_CAMEL$Section" :requestRoute="route('api.$MODEL_NAME_SNAKE$.delete', $MODEL_NAME_CAMEL$.id)" name="$MODEL_NAME_DASHED$"></delete-component>
    </div>
</template>
<script>
    export default {
        props: {
            data: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                $MODEL_NAME_CAMEL$: this.data,
            }
        },
        watch: {
          'data': function() {
              this.$MODEL_NAME_CAMEL$ = this.data;
          }
        }
    }
</script>