title: Vue grid layout with css update
body: <p>I'm working with Vue js and the vue-grid-layout.
  I would like to create a dashboard with some widget.</p>
  
  <p>The css is working with the others grid that are already in the layout object.
  So, I can add a grid with a button, but the css does not apply to the new grid.</p>
  
  <p>There is a button with a click action named addGrid(), it will add to the end of the layout object a new row.</p>
  
  <p>Thanks in advance, hopefully my post is understandable by every one.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;grid-layout
              :layout="layout"
              :col-num="10"
              :row-height="10"
              :is-draggable="true"
              :is-resizable="true"
              :is-mirrored="false"
              :vertical-compact="false"
              :margin="[10, 10]"
              :use-css-transforms="false"&gt;
  
              &lt;grid-item v-for="item in layout"
                     :x="item.x"
                     :y="item.y"
                     :w="item.w"
                     :h="item.h"
                     :i="item.i"&gt;
                     &lt;span class="text"&gt;{{item.i}}&lt;/span&gt;
              &lt;/grid-item&gt;
  &lt;/grid-layout&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import VueGridLayout from "vue-grid-layout";
  export default {
    name: "Home",
    data() {
      return {
        layout: [
          { x: 0, y: 0, w: 2, h: 2, i: "0" },
          { x: 2, y: 0, w: 2, h: 4, i: "1" },
          { x: 4, y: 0, w: 2, h: 5, i: "2" },
        ],
      };
    },
    methods: {
      addGrid() {
        this.layout.push({x:0, y:-1, w:2, h:5, i:parseInt(this.layout[this.layout.length - 1].i, 10) + 1});
      }
    }
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here goes an exemple of css grind</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.vue-grid-item:not(.vue-grid-placeholder) {
    background: #4caf50;
    opacity: 0.7;
    border: 1px solid black;
  }</code></pre>
  </div>
  </div>
  </p>