title: Reactivity in Vue JS to store all changes made?
body: <p>I'm trying to store separate objects into one array, the issue is that I'm not sure how I can have the previous input stored as well - my data gets overwritten. I included a short recording of the issue that hopefully makes things clear: <a href="https://vimeo.com/306470918" rel="nofollow noreferrer">https://vimeo.com/306470918</a></p>
  
  <p>and here's the fiddle of the code:
  <a href="https://jsfiddle.net/h64wafkp/46/" rel="nofollow noreferrer">https://jsfiddle.net/h64wafkp/46/</a></p>
  
  <p>I could push everything into an existing array, but that formats it all wrong and I'm stuck with an arrays-inside-an-array type of format which messes things up.. any idea how I can resolve the issue? I'd like to keep the format of</p>
  
  <pre><code> [
    {
      "id": 3,
      "user_id": 2, // notice id is user 2
      "date": "2018-12-04",
      "duration": 10
    },
    {
      "id": 4,
      "user_id": 1, // another user id in the same array
      "date": "2018-12-13",
      "duration": 41
    },
  ] 
  </code></pre>
  
  <p>and not</p>
  
  <pre><code>[
    [
      {
        "id": 2,
        "user_id": 1,
        "date": "2018-12-03",
        "duration": 13
      },
      {
        "id": 1,
        "user_id": 1,
        "date": "2018-12-02",
        "duration": 13
      },
    ]
  ] 
  </code></pre>
  
  <p>If I do something like <code>Object.assign({}, object1, object2)</code>, that does not store everything in one big array but rather in one big object so I can't go with that either. Any ideas?</p>