[Vuejs]-How to render d3.js chart from vue.js method (passing target div)?

Never used d3 so take this with grain of salt.

JS is single threaded and Vue DOM update process is asynchronous. The moment you assign content into your friends array, Vue had no chance yet to render your template with new data. That’s why your element doesn’t exist yet.

What you need is to use $nextTick(callback) to essentially way until Vue re-renders your template and run all the code depending on existence of elements inside the callback.

This piece of documentation explains it…