Vuejs works by using computed but does not work using data on heroku

Question

My vue page is loading an embed wistia video, the video url is an ENV variable. When I assign video url to vue data properties, it does not work because I can see the url value is undefined when mounted.

  data: function () {
    return {
      videoUrl: process.env.VUE_APP_VIDEO_URL,
    }
  },

  mounted() {
    console.log(`video url: ${this.videoUrl}`);
  },

But if I assign video link to a computed properties, it will work normally.

computed: {
  videoUrl() {
    return process.env.VUE_APP_VIDEO_URL;
  }
}

<div class="wistia_responsive_padding" style="padding:55.94% 0 0 0;position:relative;" v-if="videoUrl">
    <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
        <iframe :src="videoUrl" title="Welcome Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen msallowfullscreen width="100%" height="100%"></iframe>
    </div>
</div>

I guess that the vue data is evaluated very early but is it earlier than ENV variable is get loaded? Can someone explain me?

Note: The issue happens only when I deploy my application to heroku.

Answer 1

You can always do something like that:

{  
    data () {
        return {
            videoUrl: '',
        }
    },
    mounted() {
        this.videoUrl = process.env.VUE_APP_VIDEO_URL
    }
}