VUE.JS passes data to D3 - are you doing it right?

Playing with vue.js 0.12. Finding a better way to bind data to d3. In this example, [materials] ultimately contain parameters for generating D3 plot data, which are plotted as different series using D3. I am using vue to control the input / delete / edit parameters used to generate data and pass those parameters to a function that generates the data which D3 then calls to build on the specified tag.

It works. I just don't know if I'm doing it right. I am currently doing the following:

var test = new Vue({
  el: '#materials',

  data: {
    materials: [],
  },


  ready: function() {
    this.$watch("materials", function(value) {

      // do some parsing and pass to D3

      rock.test(JSON.parse(JSON.stringify(this.materials)));
      }

    });
  },

// rest of vue commands 

////////////////////////////////////////////////

// D3 plotting

(function(exports) {

// all my D3 code for handling the passed object from vue 
// exports.test takes the parameters passed from vue, converts them into 
// the data I want to plot, and calls D3 to plot multiple series 


})(this.rock = {});

      

        
        
        
      

    

I am using the ready function to watch when the vue model is updated with a new series to build and then pass the data object to D3. Is this correct, or is there a better way to do this? The downside is that I have to use vue.js to track data updates and D3 re-chart. If I use D3 to process data from plots in an interactive way, in my use case I am getting syncronized with the vue model (not sure how to link D3 to the vue data model).

The advice was definitely appreciated.