title: Import JSON object in VueJS and add new items to it
body: <p>In VueJS, i'm importing some JSON from a server.
  After this I'm displaying the data with a v-for directive.</p>
  
  <p>The thing is, at a later moment, I want to add extra data to that JSON object.</p>
  
  <p>This is an example of the dataobject generator by PHP:</p>
  
  <pre><code>{
  "Height": {
      "description": "Height of product in centimeters.",
      "values": {
          "1": {
              "value": "20cm",
              "extra": ""
          },
          "2": {
              "value": "60cm",
              "extra": ""
          }
      }
  }
  }
  </code></pre>
  
  <p>This is my VueJS instance:</p>
  
  <pre><code>new Vue({
    el: '#attributes_list',
    data: {
      attributes: {!! $attributes_json !!}
    },
  
    methods: {
      addAttribute : function(attr) {
        this.attributes[attr].values.new = {value: 'test', extra: 'test2'};
      }
  
    }
  })
  </code></pre>
  
  <p>And the button with the event:</p>
  
  <pre><code>&lt;button @click.prevent="addAttribute('Height')"&gt;Add&lt;/button&gt;
  </code></pre>
  
  <p>I already know it doesn't work because of the values are not in an array, so I can't push new data into it. But how to I add new data to this object though?</p>
  
  <p>At the server side, I can't change format the data is put out.
  Thanks!</p>