title: Vue.set two different object properties with the same reference
body: <p>I'm trying to add an object into an array using Vue.set function, but it adds the item to another object with the same array property.</p>
  <pre><code>data() {
      return {
        ...
        form: {
          ...
          client_a: {
             ...
             items: []
          },
          client_b: {
             ...
             items: []
          },
        }
      };
    },
  </code></pre>
  <p>When I do: (note that I'm adding an item to <strong>client_a</strong>.items)</p>
  <pre><code>this.$set(this.form.client_a.items, 'key', { prop1: '', prop2: '' })
  </code></pre>
  <p>Then <strong>client_b</strong>.items var has the same value of client_a</p>
  <pre><code>console.log(this.form.client_b.items)
  </code></pre>
  <p>Outputs</p>
  <pre><code>[
     'key': { prop1: '', prop2: '' }
  ]
  </code></pre>
  <p>The expected result of this.form.<strong>client_b</strong>.items is</p>
  <pre><code>[]
  </code></pre>
  <p>as I don't added anything into it</p>
  <p>Code example: <a href="https://codesandbox.io/s/proud-fast-bjvyr" rel="nofollow noreferrer">https://codesandbox.io/s/proud-fast-bjvyr</a></p>