Tengo este div que quiero extraer el contenido.

 <div id="print" ref="print_data"> <h1>{{ age }}</h1> </div>

y traté de extraer los contenidos usando el HTML interno nativo

 console.log( document.querySelector('#print').innerHTML );

probado también refs

 console.log( this.$refs['print_data'].innerHTML );

y no puedo ver el contenido de #print div pero puedo ver el contenido de age creado por vue en la página. Cualquier ayuda, ideas por favor es muy apreciada.

Aquí está el código completo

 <div id="app"> <div id="print" ref="print_data"> <span>{{ age }}</span> <span>{{ name }}</span> </div> <button @click="print">Print</button> <button @click="print2">Print 2</button> <button @click="print3">Print 3</button> <button @click="print4">Print 4</button> </div> new Vue({ el: '#app', data: { age: 12, name: '' }, methods: { print: function(){ this.name = 'test'; console.log(document.querySelector('#print').innerHTML); // returns HTML but 'age' is missing, no content generated by vue }), print2: function(){ this.name = 'test'; console.log(this.$refs['print_data'].innerHTML); // returns HTML but 'age' is missing, no content generated by vue }), print3: function(){ this.name = 'test2'; console.log(this.$refs['print_data'].content.innerHTML); // returns error }), print4: function(){ this.name = 'test3'; console.log(this.$refs['print_data'].toString()); // returns [object HTMLDivElement] }), } });