How to access the DOM element in such a situation?

Question

Vue.js

HTML:

<figure v-show = "( page === 'calculation ')">
  <canvas id="canvas"></canvas>
</figure>

JS:

var vm = new Vue ({
  data:	{
    page: 'order'
  },
  methods: {
    changeActivePage: function ( page )	{
      this.page = page;
      // В этот момент <figure> ещё в состоянии display:none, поэтому оказывается, что размеры <canvas> нулевые
      console.log( picture )  // <canvas ... width="0" height="0">
    
      ...
    }
  }
}

var picture = document.getElementById ( 'canvas' );
vm.changeActivePage( 'calculation' );

The v-show included figure element has a canvas that is set to 100%x100% in CSS. I enable figure by calling the changeActivePage( 'calculation' ) function. When switching pages, I need to initialize the contents of the canvas and need to get its dimensions. However, if I try to do this in the changeActivePage( 'calculation' ) function, the canvas dimensions are still zero. This is understandable, the page has not yet been rendered.
How to be? How do I start my canvas initialization when it reaches normal dimensions, i.e. after render?

Answer 1

You have already been answered above correctly, I will only add:
https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
https://vuejs.org/v2/api/#mounted