Twitch player events won't fire with Vue?

[proevilz]

I’m working with the Twitch API, specifically embeds. I want to embed a player so I have this:

var options = {
  width: 400,
  height: 300,
  channel: "twitchpresents"
};
var player = new Twitch.Player("SamplePlayerDivID", options);

const v = new Vue({
  el: "#app",
  methods: {
    init: function() {
      player.addEventListener(Twitch.Player.READY, () => {
        alert("Player is ready!!");
      });
    }
  },
  mounted: function() {
    this.init();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://player.twitch.tv/js/embed/v1.js"></script>

<div id="app">
  <div id="SamplePlayerDivID"></div>
</div>

The embed works, it plays, but the problem is, for some reason if I keep the twitch <div id="SamplePlayerDivID"></div> inside of #app, the events never fire.

Only when I take it out of the vue instance does it work… How can I make the events fire whilst keeping it inside #app ?

I tried using v-pre on the player div to try ignore it but that doesn’t work.

Is this VueJS problem or a Twitch embed problem?

Codepen: https://codepen.io/anon/pen/MPErqY?editors=1010

[proevilz]

The problem appears to be something to do with Vue creating it’s own virtual DOM. To fix it, initialize the twitch player within a method inside of vue.

const v = new Vue({
  el: "#app",
  methods: {
    init: function() {
      var options = {
        width: 400,
        height: 300,
        channel: "twitchpresents"
      }
      var player = new Twitch.Player("SamplePlayerDivID", options);

      player.addEventListener(Twitch.Player.READY, () => {
        alert("Player is ready!!");
      });
    }
  },
  mounted: function() {
    this.init();
  }
});