Vue.js Vue v-斗篷指令在组件上不起作用

我在我的组件的顶部div添加了v-clope指令，并在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>

从“/ReportComponent”导入ReportComponent；
导出默认值{
组件：{ReportComponent}，
数据：函数（）{
返回{
报告：{
类型：数组，
},
报告：{
...
},
}
},
已创建：函数（）{
var self=这个
setTimeout（函数（）{
self.loadData（“/reports”）
}, 2000);
},
方法：{
loadData:函数（）{
获取方法
}
}
[v-斗篷]{
显示：无！重要；
}

---

所有示例都创建了一个Vue实例，但我在我的组件中使用了导出默认值。此外，它不是一个主组件，它包含在路由器中。这就是为什么它不工作的原因吗？

来自文档：该指令将保留在元素上，直到相关的Vue实例完成编译。。LoadData是您的函数，h由于与模板的编译无关。谢谢，请按照中的说明完成此操作