Dashboard v2 v-edit-dialog on template table

Im testing dashboard v2 template table , and have not idea why i cannot see column that can be editable via snackbar with v-edit-dialog witch looks kinda cool, this is my code attempt so i give up with puting v-text-field.

Is there any chance to get v-edit-dialog working ?

<template>

    <v-text-field v-model="seach" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="outlined"
    hide-details></v-text-field>
    <v-data-table 
    density="compact"
    :sort-by="sortBy" 
    :sort-order="sortBy[0].order"
    v-model:search="search" 
    :headers="headers" 
    :items="msg?.payload" 
    :loading="loading"
    >
        <template v-slot:item.id="{ item }"> {{item.id}} </template>
        <template v-slot:item.time="{ item }"> {{item.time}} </template>
        <template class="text-xs-right" v-slot:item.opis="props"">
            <!-- <v-edit-dialog 
            :return-value.sync="props.item.opis"
            @save="save"
            @cancel="cancel"
            @open="open"
            @close="close"
            > -->
                <!-- {{ props.item.opis }} -->
                <!-- <template v-slot:input>      -->
          
                    <v-text-field v-model="props.item.opis" 
                    :rules="[max150chars]" 
                    counter
                    single-line variant="outlined"
                    >
                    </v-text-field>
                <!-- </template> -->
            <!-- </v-edit-dialog> -->
        </template>

    </v-data-table>
    <v-snackbar v-model="snack" :timeout="3000" :color="snackColor">
        {{ snackText }}
        <template v-slot:action="{ attrs }">
            <v-btn v-bind="attrs" text @click="snack = true">
                Close
            </v-btn>
        </template>
    </v-snackbar>
    <div class="text-center">
        <v-btn :disabled="loading" append-icon="mdi-refresh" text="Refresh" variant="outlined" @click="onClick"></v-btn>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                snack: true,
                snackColor: '',
                snackText: '',
                loading: false,
                headers: [
                    { title: 'Id', align: 'start', key: 'id' },
                    { title: 'Time', align: 'start', key: 'time' },
                    { title: 'Opis', align: 'start', key: 'opis'},
                ],
                search: '',
                sortBy: [{ key: 'id', order:'desc'}]
            }
        },
        watch: {

        },
        computed: {

        },
        methods: {
            onClick () {
                this.loading = true
                setTimeout(() => {
                    this.loading = false
                }, 1000)
            },
            save () {
            this.snack = true
            this.snackColor = 'success'
            this.snackText = 'Data saved'
            },
            cancel () {
            this.snack = true
            this.snackColor = 'error'
            this.snackText = 'Canceled'
            },
            open () {
            this.snack = true
            this.snackColor = 'info'
            this.snackText = 'Dialog opened'
            },
            close () {
            console.log('Dialog closed')
            },
        },
        mounted() {
        },
        unmounted() {
        }
    }
</script>
<style>

</style>