我有以下Vue.js（3）组件，它使用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>

如果没有v-for，一切都可以正常工作，但是当我添加它时，只有对象languages的第一个元素得到渲染。
正如您所看到的，两种语言都正确地呈现了该列表。

只有在下拉列表中，“多伊奇”（德语）才不会显示。

这是Bootstrap/Vue的错误还是我遗漏了什么？