Adicionar várias faturas em meu form - Rows

Olá professor, boa tarde!

Eu tenho um formulário e tenho um campo de fatura, nesse campo posso ter 1 ou mais faturas, se for mais de uma fatura vai gerar uma matriz de valores, segue uma imagem abaixo tentando passar os valores, e ele retorna um objeto dentro de um array.

Estou usando vuejs com api de composição e typescript., você pode me ajudar, por favor?

 

 <template>

        <div class="panel-body">

            <button type="button" class="btn btn-danger btn-sm" @click="addRow">+</button>

            <button type="button" class="btn btn-danger btn-sm" @click="removeRow">-</button>

            <div v-for="item in formNotaFiscal" :key="item">

                <div class="mb-3">

                    <label class="form-label" for="key_number">Chave </label>

                    <input class="form-control" type="text" id="key_number" maxlength="44" placeholder="Chave"

                        v-model="formNotaFiscal" required />

                    <br>

                </div>

            </div>

        </div>

    </template>

 

    <script lang="ts">

    import { defineComponent, onMounted, reactive, watch, ref } from 'vue'

    import useDocument from '@/composables/documents';

    import Multiselect from '@vueform/multiselect/src/Multiselect';

    import ModalPersonCreate from '@/components/Modal/ModalPersonCreate.vue';

 

    export default defineComponent({

        name: 'MovimentCreate',

        components: {

            Multiselect,

            ModalPersonCreate

        },

        setup(){

 

            const { documents, getDocuments, fetchDocuments, storeDocument}                      = useDocument();

            const { storeCartMoviment}                                                           = useCartMoviments();

            const { errors, currentDate, storeMoviment}                                          = useMoviment();

          

            const formNotaFiscal  = reactive({

                key_number: []

            });

            

            const addRow = () => {

                formNotaFiscal.key_number.push()

            }

 

             const removeRow = (index) => {

                 if(formNotaFiscal.length > 1)

                     formNotaFiscal.splice(index,1)

             }

 

            watch(() => formDocumentType.document_type_id, (valueAtual) => {

                formMoviment.document_type_id = valueAtual

            })

 

            const salvarMoviment = async () => {

                await storeMoviment({...formMoviment});

                await storeCartMoviment({...formCartMoviment});

                await storeDocument({...formNotaFiscal, key_number: [] });

            }

            

            onMounted(() => {

                getDocuments();

            })

 

            return{

                formMoviment,

                formCartMoviment,

                formDocumentType,

                formNotaFiscal,

                addRow,

                id,

                // key_number,

                // listItems,

                // removeRow,

                vehicles,

                companies,

                persons,

                documents,

                departments,

                documentTypes,

                salvarMoviment,

                currentDate,

                fetchVehicles,

                fetchCompany,

                fetchPerson,

                fetchDocuments,

                errors

            }

        }

    });

    </script>