[Vuejs]-How to make dialog form with Vuetify in VueJS?

In your Meals.vue

<td class="text-right">
    <ChangeMealDialog />
</td>

And in your ChangeMealDialog.vue

<template>
  <v-dialog v-model="dialog" width="600">
    <template v-slot:activator="{ on }">
      <v-btn
        v-on="on"
      >
        <v-icon left>mdi-pencil</v-icon>
      </v-btn>
    </template>
    <v-card>
         // form components
    </v-card>
</template>

Add dialog:false in your ChangeMealDialog.vue data property. You can follow the same for Approve button. Also in card title instead of toolbar you can make use of v-card-title. Read docs for more information.

Parent Component

<template>
<div id="app">
    <v-app id="inspire">

        <v-simple-table>
            <template v-slot:default>
                <thead>
                    <tr>

                        <th class="text-left">Days</th>
                        <th class="text-left">Meals</th>
                        <th class="text-left">Calories</th>

                        <th class="text-right">
                            <router-link to="/addmeal">
                                <v-btn color="primary" small right>
                                    Add Meal
                                </v-btn>
                            </router-link>
                        </th>
                    </tr>
                </thead>
                <tbody class="normalCalorie">
                    <tr v-for="meal in meals.meals" :key="meal._id">
                        <td class="text-left">{{ meal.date }}</td>
                        <td class="text-left">{{ meal.text }}</td>
                        <td class="text-left">{{ meal.numOfCalories }}</td>
                        <td class="text-right">
                            <ChangeMealDialog />
                        </td>
                    </tr>
                </tbody>
            </template>
        </v-simple-table>
    </v-app>
</div>
</template>

<script>
import {
    fetchMeals,
    deleteMeal,
} from '@/api';
import ChangeMealDialog from './ChangeMealDialog';

export default {
    data() {
        return {
            meals: [],
        }
    },
    created() {
        this.getMeals();
    },
    methods: {
        async getMeals() {
            this.meals = await fetchMeals();
            console.log(this.meals);
        },

        async deleteMeal() {
            await deleteMeal(this.meal._id)
        },
    },
    components: {
        ChangeMealDialog,
    }
}
</script>

Child Component

<template>
<v-dialog v-model="dialog" width="600">
    <template v-slot:activator="{ on }">
        <v-btn v-on="on">
            <v-icon left>mdi-pencil</v-icon>
        </v-btn>
    </template>

    <v-card>
        <v-card color="primary" dark flat>
            <v-card-title>Change Meal</v-card-title>
            <v-spacer></v-spacer>
        </v-card>
        <v-card-text>
            <v-container>
                <v-row>
                    <v-col cols="12">
                        <v-text-field label="Date*" v-model="meal.date" required></v-text-field>
                    </v-col>
                    <v-col cols="12">
                        <v-text-field label="Time*" v-model="meal.time" required></v-text-field>
                    </v-col>
                    <v-col cols="12">
                        <v-text-field label="Text*" v-model="meal.text" required></v-text-field>
                    </v-col>
                    <v-col cols="12">
                        <v-text-field label="Calorie*" v-model="meal.calorie" required></v-text-field>
                    </v-col>
                </v-row>
            </v-container>
        </v-card-text>
        <v-card-actions>
            <v-spacer></v-spacer>
            <v-tooltip left>
                <ApproveDialog />
            </v-tooltip>
            <v-btn color="primary" text @click="dialog = false">Close</v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    props: [
        'meal',
    ],
    methods: {
        async updateMeal() {
            await this.$store.dispatch('updateMeal', this.meal._id);
        }
    }
}
</script>