Vue父子组件值同步和方法执行顺序问题

代码结构：

三层关系：PrototypeDrawer>TaskDrawerHeader>TaskStatus

PrototypeDrawer.vue 最外层

<task-drawer-header 
	@beforeComplete="beforeComplete">
</task-drawer-header>

<script>
export default {
    methods:{
        openDrawer(){
          this.queryDemAttachRel();
    	},
        queryDemAttachRel(){
          this.demAttachRelListQuery.id = this.currentTask.iteraId;
          this.demAttachRelListQuery.prodId = this.currentTask.prodId;
          designApi.queryDemAttachRel(this.demAttachRelListQuery).then(response => {
            this.demAttachRelList = response.data.data
            // 页面加载查询到需求列表,之后可以查询需求关联的UI人员列表长度
            this.queryUIListLength();
          })
        },
        beforeComplete() {
          console.log("beforeComplete执行开始")
          // 这里的UIList不能在这个方法中使用async+awit同步获取,会打乱方法执行顺序,所以在打开这个页面就加载获取
          // 如果需求中有一个没关联UI人员就不生成任务，并且停止子组件完成任务
          if (this.UIList.length !== this.demAttachRelList.length) {
            // 不管是否使用sync后缀修饰属性都没有效果 可能在调用栈中属性值无法及时更新
            sessionStorage.setItem("stopComplete","true");
            console.log("PrototypeDrawer是否停止",sessionStorage.getItem("stopComplete"))
            M