为什么Vue的v-if不能及时呈现块?

小型测试组件:

<template>
  <div 
    id="report-chart"
    v-if="report"
  ></div>
  <div v-else>
    Loading...
  </div>
</template>

<script>
  import ReportChart from '@/components/report-chart'
  export default {
    data () {
      return {
        report: null
      }
    },
    watch: {
      report (value) {
        if (value) this.showReport()
      }
    },
    methods = {
      showReport () {
        // I expect the 'report-chart' elem exists but Im wrong.
        console.log(document.getElementById('report-chart')) // -> null
      },
      loadReport () {
        // returns Promise
      }
    },
    mounted () {
      this.loadReport().then(data => (this.report = data))
    }
  }
</script>

当我调用console.log()时,我希望呈现elem“report chart”,但没有错。为什么?所有需要的触发器都已打开,并且DIV必须在文档中。