Как динамически добавить шаблон в Vue 3

Я пытаюсь настроить компонент Vue 3, который динамически добавляет строки в таблицу. Пока что у меня есть следующее:

 <template>
    <table>
        <tbody>
            <tr v-for = "(item, index) in tableRows" :key = "item.id">
                <td>D{{item.id}}</td>
                <td><input type = "text" v-model = "item.Filename"></td>
                <td><input type = "text" v-model = "item.ImageTitle"></td>
                <td><input type = "text" v-model = "item.Caption"></td>
            </tr>
        </tbody>
    </table>
   <button @click.stop = "insert_Row">add row +</button>
   
   <div v-for = "item in tableRows" :key = "item.id">
     {{item}}
   </div>  
</template>
    
<script>
export default {
  data() {
    return {
    tableRows: [
      {
        "id": 1,
        "Filename": "test",
        "ImageTitle": "test",
        "Caption": "test"
      }
    ]
    }
  },
  methods: {
    insert_Row() {
      this.tableRows.push(
        {
        "id": this.tableRows.length+1,
        "Filename": "",
        "ImageTitle": "",
        "Caption": ""
      }
      )
    }
  }
}
</script>

Однако приведенное выше настроено на включение начальной строки по умолчанию перед нажатием кнопки добавления. Я хочу настроить это так, чтобы первая строка также динамически добавлялась при нажатии кнопки. Как я могу это сделать?