I have the following Vue.js (3) component, which uses 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>

Without the v-for everything works fine. But as soon, as I add it, only the first element of the object languages gets rendered.

As you can see, the list is rendered correctly, with both languages.

Only in the dropdown, "Deutsch" (German) is not rendered.

Is this a bug with Bootstrap/Vue or am I missing something?