groupBrands: [ { latter: "A", brands: [ { id: 'ac', title: 'AC', image: '' }, { id: 'acura', title: 'Acura', image: '/images/acura.svg' }, ] }, { latter: "B", brands: [ { id: 'BAW', title: 'BAW', image: '/images/baw.svg' }, { id: 'Bentley', title: 'Bentley', image: '' }, ] }, ] <ul> <li v-for="groupBrand in groupBrands" :key="groupBrand.latter" class="group" > <h3>{{ groupBrand.latter }}</h3> <ul> <li v-for="brand in groupBrand.brands" :key="brand.title" > <label :for="brand.id"> <input type="radio" :id="brand.id" name="brand" > <span>{{ brand.title }}</span> </label> </li> </ul> </li> </ul>¿Cómo puedo generar una matriz en orden "popular" y "alfabético"? En este ejemplo, lo muestro en orden alfabético, pero no sé cómo mostrar los "populares" que tienen una imagen ingrese la descripción de la imagen aquí