I have a Laravel / Inertia js / Vue application.
In a Vue page I show a form made with Formkit library
We load the schema of the form from data base with this code
<div class="row">
<FormKit type="form" @submit="inviaForm" submit-label="Invia modulo">
<FormKitSchema :schema="schema" />
</FormKit>
</div>
The form is loading and showing fine except this thing: In the schema definition I have a "select" component defined the following way
{"$cmp": "FormKit", "props": {"name": "provincia", "type": "select", "label": "della Provincia di *", "options": {"": "", "AG": "Agrigento", "AL": "Alessandria", "AN": "Ancona", "AO": "Aosta", "AR": "Arezzo", "AP": "Ascoli-Piceno", "AT": "Asti", "AV": "Avellino", "BA": "Bari", "BT": "Barletta-Andria-Trani", "BL": "Belluno", "BN": "Benevento", "BG": "Bergamo", "BI": "Biella", "BO": "Bologna", "BZ": "Bolzano", "BS": "Brescia", "BR": "Brindisi", "CA": "Cagliari", "CL": "Caltanissetta", "CB": "Campobasso", "CI": "Carbonia Iglesias", "CE": "Caserta", "CT": "Catania", "CZ": "Catanzaro", "CH": "Chieti", "CO": "Como", "CS": "Cosenza", "CR": "Cremona", "KR": "Crotone", "CN": "Cuneo", "EN": "Enna", "FM": "Fermo", "FE": "Ferrara", "FI": "Firenze", "FG": "Foggia", "FC": "Forli-Cesena", "FR": "Frosinone", "GE": "Genova", "GO": "Gorizia", "GR": "Grosseto", "IM": "Imperia", "IS": "Isernia", "AQ": "L'Aquila", "SP": "La-Spezia", "LT": "Latina", "LE": "Lecce", "LC": "Lecco", "LI": "Livorno", "LO": "Lodi", "LU": "Lucca" , "MC": "Macerata", "MN": "Mantova", "MS": "Massa-Carrara", "MT": "Matera", "VS": "Medio Campidano", "ME": "Messina", "MI": "Milano", "MO": "Modena", "MB": "Monza-Brianza" , "NA": "Napoli", "NO": "Novara", "NU": "Nuoro", "OG": "Ogliastra", "OT": "Olbia Tempio", "OR": "Oristano" , "PD": "Padova", "PA": "Palermo", "PR": "Parma", "PV": "Pavia", "PG": "Perugia", "PU": "Pesaro-Urbino", "PE": "Pescara", "PC": "Piacenza", "PI": "Pisa", "PT": "Pistoia", "PN": "Pordenone", "PZ": "Potenza", "PO": "Prato" , "RG": "Ragusa", "RA": "Ravenna", "RC": "Reggio-Calabria", "RE": "Reggio-Emilia", "RI": "Rieti", "RN": "Rimini", "RM": "Roma", "RO": "Rovigo" , "SA": "Salerno", "SS": "Sassari", "SV": "Savona", "SI": "Siena", "SR": "Siracusa", "SO": "Sondrio" , "TA": "Taranto", "TE": "Teramo", "TR": "Terni", "TO": "Torino", "TP": "Trapani", "TN": "Trento", "TV": "Treviso", "TS": "Trieste", "UD": "Udine", "VA": "Varese", "VE": "Venezia", "VB": "Verbania", "VC": "Vercelli", "VR": "Verona", "VV": "Vibo-Valentia", "VI": "Vicenza", "VT": "Viterbo"}, "validation": "required"}}
It always show ordered by options keys and not as per the sequence I wrote in the component definition. It there a way to show them listed as I wrote the list and not ordered by keys?