vue在子组件中监听父组件的接口数据，如果接口数据已加载完，就在子组件获取dom元素的offsetWidth

可以使用`watch`监听父组件传递给子组件的接口数据，当数据加载完成后，触发一个回调函数，在回调函数中使用`$nextTick`获取DOM元素的`offsetWidth`。

具体实现可以参考以下代码：

// 子组件
export default {
  props: {
    apiData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isApiDataLoaded: false // 标记接口数据是否已加载
    }
  },
  watch: {
    apiData: {
      handler(newVal, oldVal) {
        if (newVal && !oldVal) { // 数据从未加载到已加载完成
          this.isApiDataLoaded = true
          this.$nextTick(() => {
            const offsetWidth = this.$refs.myElement.offsetWidth
            console.log(offsetWidth)
          })
        }
      },
      deep: true // 深度监听对象数据的变化
    }
  }
}

在上面的代码中，首先在子组件的`props`中定义了一个名为`apiData`的属性，该属性用于接收父组件传递过来的接口数据。然后在`data`中定义了一个名为`isApiDataLoaded`的属性，用于标记接口数据是否已加载。接下来，在`watch`中监听`apiData`属性的变化，并在数据从未加载到已加载完成时触发一个回调函数。在回调函数中，首先将`isApiDataLoaded`属性设置为`true`，然后使用`$nextTick`获取DOM元素的`offsetWidth`，并输出到控制台中。

需要注意的是，由于DOM元素是在组件渲染完成后才能获取到，因此需要在`$nextTick`中获取DOM元素的`offsetWidth`。同时，由于`$nextTick`是异步执行的，因此需要先将`isApiDataLoaded`属性设置为`true`，避免在数据加载完成前就执行`$nextTick`的回调函数。