Vue组件呈现但未出现在Vue开发工具中

Question

我的代码似乎可以很好地呈现给DOM，但是当我尝试使用Vue DevTools对其进行检查时，我只显示了一个组件？

代码（正确呈现给DOM）：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <Header />
    <QuestionBox v-bind:currentQuestion="questions[index]" v-bind:next="next" />
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import QuestionBox from "./components/QuestionBox.vue";

export default {
  name: "App",
  components: {
    Header,
    QuestionBox,
  },
  data() {
    return {
      questions: [],
      index: 0,
    };
  },
  methods: {
    next() {
      this.index++;
    },
  },
  mounted: function () {
    fetch("https://opentdb.com/api.php?amount=10&category=17&type=multiple", {
      method: "get",
    })
      .then((response) => {
        return response.json();
      })
      .then((jsonData) => {
        this.questions = jsonData.results;
      });
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我在VUE工具中看到的内容

<Root>
 <App>
   <Header>
     <BLink>
      <BNavItem>
      <BNavItem>

是否存在某些格式不正确的格式？我曾尝试在某些div中使用QuestionBox组件，但仍无法渲染。