Nuxt: binded values in the data-setup of video element are not updating

[pnijhara]

I am using nuxt 2 and passing video metadata to data-setup as shown below:

<video ref="videoPlayer" class="video-js vjs-theme-forest" :data-setup=metaData></video>


export default{
  data() {
    videos: [],     // array of all the video objects with video options
    metaData: null,
    player: null
  }
  mounted() {
   this.currentVideo = this.videos[0];
    this.metaData = JSON.stringify({
      "plugins": {
        "httpSourceSelector": {},
        "mux": {
          "data": {
            "env_key": this.$config.muxEnvKey,
            "video_title": "my great video",
          }
        }
      }
    })
  this.player = videojs(this.$refs.videoPlayer, this.videos[0])
 }
}

I don't see any problem with the code. However, still, data-setup is not able to use the updated value of metaData.

[gkatsev]

Are you able to share a live example on a site like codesandbox.io?