title: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.
body: <p>I am a bit confused using VueJS2. I added a few variables to the data container for sending it to my API. That works fine but Vue is throwing me a warning/error message which I don't know how to solve:</p>
  
  <blockquote>
    <p>Avoid adding reactive properties to a Vue instance or its root $data
    at runtime - declare it upfront in the data option.</p>
  </blockquote>
  
  <pre><code>var app = new Vue({
      el: '#app',
      data: {
          incidentReference: '',
          streetName: '',
          latitude: '',
          longitude: '',
          featureTypeId: 1,
          archived: 0
      },
  
      computed: {
          href() {
              return '#' + this.name.toLowerCase().replace(/ /g, '-');
          }
      },
  
      mounted: function () {
          this.getIncidents();
      },
  
      methods: {
          onSubmit() {
              axios.post('/api/v1/incidents', this.$data)
                  .then(response =&gt; alert('Success'))
                  .catch(error =&gt; {
                      console.log(error.response);
                  })
          },
  
          getIncidents: function() {
              console.log('getIncidents');
              var self = this;
              axios.get('/api/v1/incidents').then(function(response) {
                  // set data on vm
                  console.log(response.data);
                  var incidentsReceived = response.data.data.map(function (incident) {
                      return incident;
                  });
                  Vue.set(self, 'incidents', incidentsReceived);
              });
          }
      }
  });
  </code></pre>