vue中videojs宽度和高度随着外部div变化而变化

要实现这个效果，可以使用Vue的计算属性（Computed）和watch来监听外部div的宽度和高度的变化。

1. 首先，在组件中定义一个计算属性，用来获取外部div的宽度和高度：

computed: {
  containerSize() {
    return {
      width: this.$refs.container.offsetWidth,
      height: this.$refs.container.offsetHeight
    };
  }
},

这里使用了 `$refs` 来获取外部div的实际宽度和高度。

2. 然后，在组件中添加watch监听外部div的变化：

watch: {
  containerSize() {
    this.player.width(this.containerSize.width);
    this.player.height(this.containerSize.height);
    this.player.responsive(true);
  }
},

这里使用了 `player` 对象，它是 `videojs` 提供的一个对象，用来操作video元素。在watch中，我们监听外部div的变化，并设置`player`的宽度和高度等于外部div的宽度和高度。最后，调用 `player.responsive(true)` 方法来让video元素自适应外部div的变化。

3. 最后，在组件的模板中，使用`ref`来引用外部div，并把video元素放到外部div中：

<template>
  <div ref="container">
    <video ref="player" class="video-js"></video>
  </div>
</template>

这样，当外部div的宽度和高度变化时，`videojs` 中的video元素也会跟着自适应变化。