Vue v-cloak指令不适用于组件

Question

我在组件的最上层div上添加了v-cloak指令，并在docs中添加了css，设置了超时时间，但是它不起作用，我可以看到其他内容和表单样式。 组件代码：

<div class="form-in-wrap" v-cloak>
        <ul id="example-1" v-if="reports.length>0">
            <report-component v-for="report in reports" :report="report" :key="report.id" :options="options">
            </report-component>
        </ul>
</div>

组件脚本：

<script>
import ReportComponent from "./ReportComponent";

export default {
    components: {ReportComponent},
    data: function () {
        return {
            reports: {
                type: Array,
            },
            report: {
                ...
            },
        }
    },
    created: function () {
        var self = this
        setTimeout(function () {
            self.loadData('/reports')
        }, 2000);

    },
    methods: {
        loadData: function() { 
             get method
        }
    }
</script>
<style scoped>
[v-cloak] {
    display: none !important;
}
</style>

所有示例都创建一个Vue实例，但是我在组件中使用了export default。它也不是主要组件，它包含在路由器中，这是为什么它不起作用吗？