title: Using ag grid as nuxt component
body: <p>I would like to use Ag-grid as a component, then I would like to call it from many pages.
  The component should fetch columns and data from the parent page.</p>
  
  <p>Since I've been struggling a lot with this problem I would appreciate a simple example very much.
  It seems that I always get some kind of timing problem between the page and my component.</p>
  
  <p>If possible I would like to create the page with an empty grid and then load the data. But not sure if that is possible.</p>
  
  <p>Thanks in advance
  Håkan</p>
  
  <p>My page:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;aomGrid
        pagePath="/stock/"
        :fields="gridHeader.fields"
        :data="rowData"
      &gt;&lt;/aomGrid&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>My component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;ag-grid-vue
        class="ag-theme-fresh grid"
        :gridOptions="gridOptions"
        :rowDataChanged="onRowDataChanged"
        :rowData="gridData"
      &gt;
      &lt;/ag-grid-vue&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { AgGridVue } from "ag-grid-vue";
  export default {
    data() {
      return {
        gridOptions: null,
        gridData: null,
      };
    },
    props: {
      fields: {
        type: Array
      },
      gridData: {
        type: Array
      }
    },
    components: {
      AgGridVue
    },
      onRowDataChanged() {
        Vue.nextTick(() =&gt; {
          this.gridOptions.api.sizeColumnsToFit();
        });
      },
      created() {
        this.gridOptions = {};
        this.gridOptions.columnDefs = this.fields;
      },
      beforeMount () {
       this.gridOptions.api.setRowData = this.gridData;
      }
    }
  };
  </code></pre>