Tengo el siguiente componente Vue.js (3), que usa Bootstrap (5):

 <template> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle btn-link text-decoration-none text-dark" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> {{ languages[$i18n.locale] }} </button> <div class="dropdown-menu" aria-labelledby="languageDropdown" v-for="(value, key) in languages" v-bind:key="key"> <a class="dropdown-item" href="#" @click="changeLanguage(key)">{{ value }}</a> </div> <li v-for="(value, key) in languages" v-bind:key="key"> {{ key }}: {{ value }} </li> </div> </template> <script> export default { name: "LanguageSwitcher", data() { return { languages: { 'en': 'English', 'de': 'Deutsch', } }; }, methods: { changeLanguage: function(lang){ this.$i18n.locale = lang; } } }; </script>

Sin la v-for todo funciona bien. Pero tan pronto como lo agrego, solo se representa el primer elemento de los languages del objeto.

Como puede ver, la lista se representa correctamente, con ambos idiomas.

Solo en el menú desplegable, "Deutsch" (alemán) no se representa.

¿Es esto un error con Bootstrap/Vue o me estoy perdiendo algo?