title: vue.js element selected by focus is not reactive
body: <p>I have a listener to check what input was selected at last to add some kind of string/variable later into it.</p>
  
  <pre><code>created: function () {
      document.addEventListener('focusin', this.focusChanged);
  }
  
  focusChanged(event) {
      if (event.target.id !== 'variable-search') {
          this.lastElement = event.target;
      }
  }
  </code></pre>
  
  <p>This seems to work fine, and when I click on an input field <code>this.lastElement</code> gets updated with the focused element. All these inputs have a <code>v-model</code> which can be a string in an object or just a plain string.</p>
  
  <p>Now the thing is when I try to update the value by:</p>
  
  <pre><code>this.lastElement.value += variable;
  </code></pre>
  
  <p>Vue won't detect its changes, also in the Vue Developer tools the string won't get updated. But in the input field it does get updated. So this should be a reactivity thing.</p>
  
  <p>When I add a new character into the input field (v-model) it does update again. So it's just when I update the string by <code>this.lastElement</code> it won't register its changes.</p>
  
  <p>The thing is that the input fields are dynamic, so I don't know how many input fields are here and how many lists etc. So I need Vue to re-render the variable after the value of <code>lastElement</code> is updated.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>I just tried it with an @focus here an example</p>
  
  <pre><code>&lt;input v-model="testVar" @focus="lastElement = testVar"&gt;
  </code></pre>
  
  <p>If I update <code>lastElement</code> later on it doesn't update it for <code>testVar</code> but just for <code>lastElement</code>.</p>