How to debug VueJS getElementById issue

Question

I am using a VueJS single File component with the following template:

<template>
        <div class="row">
            <div class="col-md-12">
                <div id="hottable"></div>
            </div>
        </div>
</template>

And the following script:

<script>
//import all handsontable deps
export default {
  props: ['jsondata'],
  data () {
      return {}
  },
  methods: {
    populateTable: function() {
      var container = document.getElementById('hottable')
      console.log('container: ' + container)
    }
  },
  watch: {
    jsondata: function () {
      this.populateTable()
    }
  }
}

In the browser I can see that

<div data-v-270950bf id='hottable'></div>

exists, but when I run the code I get the following in the console:

container: null

I cant for the life of me work out why the container is null

Answer 1

Seems to work fine: https://jsfiddle.net/wostex/63t082p2/47/

But it's not the best practice if you manipulate DOM manually. It limits your possibilities with reactive properties.

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

new Vue({
    el: '#app',
    components: {
    'child': {
      template: `
        <div class="row">
            <div class="col-md-12">
                <div id="hottable"></div>
            </div>
        </div>`,
      mounted() {
        let c = document.getElementById('hottable');
        console.log(c);
      }
    }
  }
});