willaengine/resources/js/User/components/Config/Department/Add.vue

<template>
    <v-dialog v-model="$store.state.ConfigUserDepartmentAdd" width="30%" transition="slide-x-transition">
        <v-card class="RTL">
            <v-card-title class=" grey lighten-3" primary-title>
                <WM-PartTitle class="WM-Margin-T-20" TitleFa=" افزودن دپارتمان " TitleEn=" Add a Deaprtment " color="orange"></WM-PartTitle>
            </v-card-title>

            <v-card-text>
                <div class="row">
                    <v-flex lg12>
                        <v-card-text>
                            <v-autocomplete prepend-icon="fas fa-align-right" :items="departments" color="orange" item-text="name_fa" label=" دپارتمان مادر "></v-autocomplete>
                            <v-text-field label=" نام فارسی بخش یا دپارتمان " color="orange" prepend-icon="fas fa-tag" ></v-text-field>
                            <v-text-field label=" Deparment or Section Name " color="orange" prepend-icon="fas fa-tag" ></v-text-field>

                        </v-card-text>
                    </v-flex>
                </div>
            </v-card-text>
            <v-divider></v-divider>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="orange" depressed dark @click="$store.state.ConfigUserDepartmentAdd = false">
                    <v-icon dark right>fas fa-check</v-icon> تایید اطاعلاعات
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>

</template>

<script>

export default {
    props: {
    },
    data () {
        return {
            departments: [
                {
                name_fa: " فنی ",
                name_en: " Technical ",
                },
                {
                name_fa: " فروش ",
                name_en: " Sale ",
                },
                {
                name_fa: " مدیریت ",
                name_en: " Management ",
                }
            ]
        }
    }
};
</script>