We are integrating with vue.js, but we need to dynamically build div elements

I was looking at https://www.flexmonster.com/question/integrtion-with-vue-js/ and it was suggested to put the container div element in index.html.  
We are building a proof of concept dashboard, the problem is we don't know how many widgets we will need to create until we get the data within vue.  

So for now, I have the following in my vue file:
 
<div class="content">
<div id="page1" v-show="page == 1" class="page" style="">
<div id="pivotContainer1-grid" class="widget"></div>
<div id="pivotContainer1-charts" class="widget"></div>
</div>
<div id="page2" v-show="page == 2" class="page" style="">
<div id="pivotContainer2-grid" class="widget"></div>
<div id="pivotContainer2-charts" class="widget"></div>
</div>
<div id="page3" v-show="page == 3" class="page" style="">
<div id="pivotContainer3-grid" class="widget"></div>
<div id="pivotContainer3-charts" class="widget"></div>
</div>
...
</div>
 
If I use a v-for loop to dynamically build these elements, then I get an error within flexmonster that the container cannot be found (since it is not in the dom)
 
Any suggestions on how to do this?  Thanks.