Use v-for in Templates (Vue-Tables-2)

I would like to display axios data in my datatables being that they have a dynamic key I would like to create a template

Data Set : "environment": "production", "version": "5.6", "apache_version": "3.2.1"

My Vue.js :

    new Vue({
    el: "#info",
    mounted() {
        this.getInfo()
    },
    methods: {
        getInfo() {
            axios
            .get("http://localhost:8080/info")
            .then(response => {
                this.info = response.data
            })
        },
    },
    data: {
        selectedRow: [],
        columns: ['name','value'],
        rows : [],
        options: {
            headings: {
                name: 'Info',
                value: 'Value'
            },
            sortable: ['name','value'],
            filterByColumn: true,
        },
    },
});

My HTML :

<div id="info" v-cloack>
    <v-client-table :data="rows" :columns="columns" :options="options">
        <template slot="name" scope="props">
            <div v-for="(value, name) in info">
                <p>{{ props.rows.name }}</p>
            </div>
        </template>
        <template slot="value" scope="props">
            <div v-for="(value, name) in info">
                <p>{{ props.rows.value }}</p>
            </div>
        </template>
    </v-client-table>
</div>

In order to display in the name column : environment, version, apache_version
And in the value column display : production, 5.6 , 3.2.1

Thanks !

This inside axios does not have access to the component you should do as follows:

 new Vue({
    el: "#info",
    mounted() {
        this.getInfo()
    },
    methods: {
        getInfo() {
            let vm = this;
            axios
            .get("http://localhost:8080/info")
            .then(response => {
                vm.info = response.data
            })
        },
    },
    data: {
        selectedRow: [],
        columns: ['name','value'],
        rows : [],
        info: [],
        options: {
            headings: {
                name: 'Info',
                value: 'Value'
            },
            sortable: ['name','value'],
            filterByColumn: true,
        },
    },
    computed: {
        formattedColumns() {
            let columns = [];
            for (const key in this.info) {
                let column = {};
                column.name = key;
                column.value = this.info[key];
                columns.push(column);
            }
            return columns;
        }
    }
});

This computed property returns something like this :

[{name: "environment", value: "production"},{name: "version", value: "5.6"..}]

You can sure change it to your liking and to what is needed