En mi aplicación, el usuario proporciona códigos de estilo dentro del campo de entrada. Quiero agregar un modal de confirmación emergente que tendrá un mensaje que contenga la cantidad de códigos de estilo proporcionados. Tengo a continuación:

 <template> <h4>Style number</h4> <FormulateForm v-model="styleCodes"> <FormulateInput name="product_codes" placeholder="Style number" /> <button type="button" class="btn btn-primary" @click="syncProducts" > Sync </button> </FormulateForm> </template> <script> export default { name: 'SyncProducts', data() { return { styleCodes: [], } }, computed: { productsToSyncAmount () { return this.styleCodes.length }, methods: { async syncProducts() { let confirmationText = `Do you want to ${this.productsToSyncAmount} sync products?` if (this.productsToSyncAmount === 0) { ModalController.showToast('', 'Type product codes for sync first, please!', 'warning') } else if (await ModalController.showConfirmation('Confirmation', confirmationText)) { try { ModalController.showLoader() await createApparelMagicProductsRequest(this, this.styleCodes) } catch (data) { const errorMessage = `Error occurred during queueing products to sync - ` ModalController.showToast('', errorMessage + data?.message, 'error') } finally { this.styleCodes = [] } } }, } } </script>

Creo que la parte crucial es esa

 methods: { async syncProducts() { let confirmationText = `Do you want to ${this.productsToSyncAmount} sync products?`

No entiendo por qué este código produce un número indefinido de longitud y me muestra el mensaje Do you want to undefined sync products? . Dentro de la consola tengo:

[Advertencia de Vue]: accesorio no válido: la verificación de tipo falló para el accesorio "formulateValue". Objeto esperado, matriz obtenida

¿Cómo arreglar eso?