v-for nested to add multiple inputs in each row and specific column of a table

As you could add multiple inputs in each row of a specific column, the idea is, I have a v-for that generates the table and in each row I have a button add "peridodo" that would add multiple inputs in a column in the respective row of that column, I add an image so you can better understand what I want to do:

I add the code I did:

<div id="app" class="content">
<div class="row">
    <div class="span8 offset2">
        <div class="row">
            <div class="span12">
                <h1>CARGA DE NOVEDADES</h1>
                <h3>Unidad Organizativa: {{data.usuario.organismoPadre}}</h3>
                <h3>Periodo: Agosto - Septiembre 2018</h3>
            </div>
            <div class="row">
                <div class="span12">
                    <h2>Reemplazos Autorizados</h2>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <table class="table table-striped table-hover">
                        <thead>
                        <td>orden</td>
                        <td>Formulario</td>
                        <td>Motivo</td>
                        <td>Nivel</td>
                        <td>Reemplazante</td>
                        <td>Reemplazado</td>
                        <td>Autorizado Desde</td>
                        <td>Hasta</td>
                        <td>Trabajo Periodo Completo</td>
                        <td>No trabajo</td>
                        <td>Desde</td>
                        <td>Hasta</td>
                        <td>Agregar Periodo</td>
                        <td>Guardar</td>
                        </thead>
                        <tbody>
                        <tr v-if="data.novedades!=null" v-for="(novedad,key) in data.novedades">
                            <td>{{ key+1  }}</td>
                            <td>{{novedad.tipo_formulario}}</td>
                            <td>{{novedad.motivo}}</td>
                            <td>{{novedad.nivel}}</td>
                            <td v-html="novedad.reemplazante"></td>
                            <td v-html="novedad.reemplazado"></td>
                            <td>{{novedad.fdesde}}</td>
                            <td><input type="checkbox" name="periodo_completo"></td>
                            <td><input type="checkbox" name="no_trabajo"></td>
                            <td>
                                <div class="row">
                                    <div class="" v-for="(periodo,index) in novedad.periodos">
                                        <div class="fechas">
                                        <input type="date" class="form-control" v-model="novedad.periodos.fdesde">
                                    </div>
                                    </div>
                                </div></td>
                            <input type="date" name="">

                            <td>
                                <button class="btn btn-mini btn-danger">Eliminar</button>
                            </td>
                            <td><button class="btn btn-mini btn-success" @click="addPeriodo(key)">Agregar Periodo</button></td>
                            <td><a class="btn btn-mini btn-danger" href="#">Guardar</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
var app = new Vue({
    el: "#app",
    data: {
            data: {
                    novedades:[
                        {
                            periodos: [
                            {
                                fdesde: '',
                            }
                            ]
                        }
                    ],
                    usuario: {
                                organismoPadre: null
                    },
            },

    },
    methods: {
        addPeriodo (key) {
            // var elem = document.createElement('div');
            this.data.novedades[key].periodos  = [];
            this.data.novedades[key].periodos.push({
                fdesde: '',
            });
            console.log(this.data.novedades[key].periodos);
            console.log(key);
        },
        // removeElement: function(index) {
        //     this.rows.splice(index, 1);
        // },
    },
    created() {
        axios.get('http://localhost/desarrollo/php/yii/rrhh/index.php?r=formulario2/F2NovedadesData').then(response => this.data = response.data);
    }

});