title: Is that the right way to set an id in Vue.js component?
body: <p>I am trying to integrate Phaser 3 with Vue.js 2.</p>
  
  <p>My goal is to create a Vue.js component associated with a game canvas.</p>
  
  <p>My initial solution was:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div :id="id"&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Phaser from 'phaser'
  export default {
    data () {
      return {
        id: null,
        game: null
      }
    },
    mounted () {
      this.id = 'game' + this._uid
      var config = {
        parent: this.id,
        type: Phaser.CANVAS
      }
      this.game = new Phaser.Game(config)
  
      ....
  
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This code attach the game canvas to my template. But to my surprise it only worked 'sometimes'.</p>
  
  <p>I figured out, after hours of debugging, that my div element in the DOM wasn't updated with the id when I was instantiating my new Game.</p>
  
  <p>So I came up with the solution of instantiating the id in the beforeMount () method as follow:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div :id="id"&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Phaser from 'phaser'
  export default {
    data () {
      return {
        id: null,
        game: null
      }
    },
    beforeMount () {
      this.id = 'game' + this._uid
    },
    mounted () {
      var config = {
        parent: this.id,
        type: Phaser.CANVAS
      }
      this.game = new Phaser.Game(config)
  
      ....
  
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>It is working, but I would like to know if there is a more simple and elegant solution ?</p>