這是一個router中components的template:<template>  <div class="readerView">    <div id="area"></div>  </div></template><script>  export default {    name: 'readerView',    props: {      bookDetail: Object,    },    data () {      return {      }    },    watch: {      'bookDetail' : 'display'    },    methods: {      display() {        var area = document.getElementById("area");        console.log("in display, area: ", area);      }    },    mounted () {      var area = document.getElementById("area");      console.log("in mounted, area: ", area);    },  }</script><style>@import url("../style/basic.css");.readerView {  position: absolute;  width: 100%;  height: 100%;}</style>在該組件的mounted函數中調用document.getElementById("area");可以正常得到該divdisplay中同樣的調用document.getElementById("area");結果竟然返回空？？？